在特定條件下逐步執行javascript或jQuery

Question

我們的任務是將給定的svg附加到DIV並在單擊按鈕(.button-new)時轉換為嵌入式svg 。

因此，我們有一個具有特定寬度和高度的div (#main-div) ，例如width和height為200 px。

並且我們有一個svg，其寬度和高度為50 px 。 因此，共有total_no_blocks =4元素進入了容器。

然后我們編寫以下代碼，將div附加到svg圖片中。

for(var i =0;i<total_no_blocks;i++){
   $("#main-div").append("<img id=\"facebook-logo\" class=\"svg\"  src=\""+img_src+"\" width=\"100\" />");
}

並轉換為嵌入式svg，我們使用以下代碼

https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df

jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Replace image with new SVG
        $img.replaceWith($svg);

    }, 'xml');

});

問題是javascript無法逐步運行。

根據我們的代碼，前4個圖像需要在div中追加，然后將其轉換為內聯svg。

但是發生的是，在加載並顯示4張圖片到main-div之前的一段時間，它開始轉換為嵌入式svg。 結果是第一次只加載了2張圖像，而同時加載了3張圖像，或者有時是正確的。

所以總代碼是這樣的[這不是完整的代碼]

$(".button-new").on("click",function(){
    $("#main-div").children().remove();

    for(var i =0;i<total_no_blocks;i++){

        $("#main-div").append("<img id=\"facebook-logo\" class=\"svg\"  src=\""+img_src+"\" width=\"100\" />");

    }



    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');

    });


     function 3() etc.......

});

我知道javascript是syncnus，但某些情況（例如ajax）將逐步運行，因為它正在等待返回消息

。

在當前情況下，我們如何控制腳本的執行？

需要采取哪些步驟來確保所有步驟都在逐步執行並且所有執行都已正確完成？

Answer 1

讓我們總結一下場景：

用戶點擊.button-new按鈕
元素#main-div將附加total_no_blocks個Facebook徽標，即img.svg
img.svg項被迭代
AJAX請求發送到服務器以獲取圖片（在每次迭代中）
響應被解釋為SVG並被寫入，而不是帶有id的標簽

主要問題是您的代碼假定正在等待Facebook徽標。 這不是它的工作方式。 實際上，標記是立即創建的，隨后的迭代發生在標記創建之后，但是這些是從某個地方加載的圖像（除非已緩存），並且是異步的。 您需要實現$("#main-div > img").load()處理函數，並在其中放置替換圖像的邏輯。 這將等待特定的標簽加載並完成所需的操作。 但是，您還有其他問題。 在每種情況下，您的id都是facebook-logo ，這違背了id s的目的，即標識標簽。 因此，您還需要在周期中進行此更改：

$("#main-div").append("<img id=\"facebook-logo" + i + "\" class=\"svg\"  src=\""+img_src+"\" width=\"100\" />");

這將使項目變得獨特。 最后，我不明白為什么您生成的圖像將毫無用處，因此會被svg圖像覆蓋。 如果這具有教育性或說明性目的，則您可能需要考慮將$("#main-div > img").load()處理函數包裝到setTimeout ，等待一秒鍾，例如讓人眼看到最初的圖像是什么。 如果沒有，那么您可以從一開始就簡單地使用svg來避免所有麻煩。

Answer 2

這是一個小示例，您可以在其中查看發生的情況。 將簡單的回調作為參數添加到函數中。

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SVG 001</title> <style> body{font-family:"Calibri", sans-serif;} svg{border:1px solid #eee;float:left;} </style> </head> <body> <h1>Offset Dasharray</h1> <svg width="200" height="200" viewBox="0 0 500 500"> <path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none"stroke-width="5" fill="none" /> </svg> <p id="astart"><p> <p id="aend"><p> <p id="acallback"><p> <script> var paintPathAni=function(path, duration, color, callback){ easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t } var len=path.getTotalLength(); var aktLen; var sumSteps = duration / (1000/60) // 60 pics per second var step=1; var pathAnim; var anim=function(){ aktLen = easeInOutQuad(step/sumSteps)*len; path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen)); path.setAttribute('stroke',color); if (step < sumSteps){ step++; pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second } else { clearTimeout(pathAnim); path.setAttribute('stroke',"red"); path.setAttribute('stroke-dasharray','none'); if (callback) return callback(); } } anim(); } astart.innerHTML="before function call"; paintPathAni(myPath, 5000,'red',function(){acallback.innerHTML="callback call";}); aend.innerHTML="after function call"; </script> </body> </html>

在特定條件下逐步執行javascript或jQuery

問題描述

2 個解決方案

解決方案1
2 2017-05-31 09:31:55

解決方案2
1 2017-05-31 09:06:53

在特定條件下逐步執行javascript或jQuery

問題描述

2 個解決方案

解決方案1 2 2017-05-31 09:31:55

解決方案2 1 2017-05-31 09:06:53

解決方案1
2 2017-05-31 09:31:55

解決方案2
1 2017-05-31 09:06:53