在特定条件下逐步执行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