在特定条件下逐步执行javascript或Jquery

我们的任务是将给定的svg追加到

DIV

中，并在按钮单击

（.button new）

时转换为内联

svg

因此我们有一个具有特定宽度和高度的div

（#main div）

，例如宽度和高度200 px。

我们有一个svg，其宽度和高度为50px。因此有

total_no_blocks=4个
元素进入容器

我们编写了以下代码，用svg图像附加
div

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

问题在于javascript无法一步一步地工作。

根据我们的代码，前4个图像需要附加到div中，第二个图像转换为内联svg

但实际情况是，在将4图像加载并显示到主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.......

});

$（“.button new”）。在（“单击”，函数（）上）{
$（“#主分区”）.children（）.remove（）；
对于（var i=0；i，这里有一个小示例，您可以在其中看到发生了什么



SVG 001
正文{字体系列：“Calibri”，无衬线；}
svg{border:1px solid#eee；float:left；}
偏移阵列



var paintPathAni=函数（路径、持续时间、颜色、回调）{
easeInOutQuad=function（t）{返回t让我们总结一下场景：


用户单击
。按钮新建
按钮
元素
#main div
将附加
总块数
facebook徽标数，即
img.svg
迭代
img.svg
项
向服务器发送一个AJAX请求以获取图片（在每次迭代中）
响应被解释为SVG并被写入，而不是具有
id

主要问题是你的代码假设facebook徽标正在等待。这不是它的工作方式。事实上，标记会立即创建，随后的迭代会在创建标记后发生，但这些是从某处加载的图像（除非缓存）这是异步的。您需要实现一个
$（“#main div>img”）.load（）
处理程序并将替换图像的逻辑放在那里。这将等待加载特定标记并执行需要执行的操作。但是，您还有其他问题。在每种情况下，您的
id
都是
facebook徽标
，这与
id
s用于识别标记的目的不符。因此，您需要此c在你的周期中也要悬挂：

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

$（“#主分区”）。追加（“”）；

这将使这些项具有唯一性。最后，我不明白为什么你生成的图像将毫无目的，因此会被SVG图像所覆盖。如果这具有教育性或说明性的目的，那么你可能需要考虑包装你的<代码> $（“γ主div > IMG”）。
将处理程序转换为
设置超时
，等待一秒钟，例如让人的眼睛看到初始图像。如果不是，那么你可以从一开始就简单地使用svg来避免所有的麻烦。
AJAX代表异步Javascript和XML，这是异步的…@abilasher欢迎你，祝你一切顺利你的项目。你能总结一下整个代码是怎样的吗？在这里我没有使用Ajax。但是为什么你说会向服务器发送一个Ajax请求来获取图片？@abilasher第一个问题的答案是肯定的，但是我需要你的帮助来测试代码，以确保一切正常，没有拼写错误等等第二个问题的答案是，有一个异步请求请求服务器获取文件这个请求没有等待完成。因此这是异步的。我不知道Javascript和XML是否参与了浏览器的内部逻辑，在某些浏览器中可能是这样，但它的工作方式与AJAX非常相似。@abilasher所以，也许我有点夸张了。我真正的意思是是一个异步请求，您可以在成功提取文件时为该事件附加一个事件处理程序。该处理程序与AJAX请求的回调非常相似。@abilasher我对屏幕捕获没有太多经验。
$("#main-div").append("<img id=\"facebook-logo" + i + "\" class=\"svg\"  src=\""+img_src+"\" width=\"100\" />");