javascript - 等待时循环替换 的内容

Question

我很难弄清楚我的问题，甚至很难找到解决方案，这让我相信我可能走错了方向。

在cshtml上页面我有一个 ajax与按钮点击相关的功能。该路由返回到我的 Controller ，并且一个 json 字符串数组返回到客户端。

在页面本身上我有 <pre id="replaceMe">***</pre>定义的。我正在尝试迭代 json 数组，执行 $("#replaceMe").replaceWith('<pre id="replaceMe">' + data[i] + '</pre>');

从技术上讲，这是可行的，但仅限于上次更新可见的意义上。我不妨直接转到数组的最后一个元素。

我尝试过使用setTimeout无济于事，没有任何变化，然后突然显示最后一个元素。我找到了一些sleep就像模仿相同基本行为的函数一样，都具有相似的结果。我确实看到了一些关于 async sleep 的建议，但我的浏览器似乎都不喜欢异步，并给我一个关于缺少 ; 的错误。 .

然后我想我可以做类似的事情

function updateSection(data) {
    for (var i = 0; i < data.length; i++){
        var section = $("#replaceMe");
        section.fadeOut(500);
        section.replaceWith('<pre id="replaceMe">' + data[i] + '</pre>');
        section.fadeIn(500);
    }
}

然而，这具有相同的最终结果。没有明显的变化，然后突然它成为数组中的最后一个元素。

我显然是错误的，否则我想我会很容易找到一个例子，那么我应该做什么呢？

为了澄清和总结，我想替换<pre></pre>的内容包含在数组中的文本。我希望每次迭代的可见时间足够长，以便人们在进入下一次迭代之前能够看到它并观察变化(~1000 毫秒)。

例如，如果数组包含 "Tom", "Dick", "Harry" ，那么我希望页面有

<pre id="replaceMe">Tom</pre> 1 秒，然后该元素被替换为

<pre id="replaceMe">Dick</pre> 1 秒，然后该元素被替换为

<pre id="replaceMe">Harry</pre>

我不是在寻找

<pre id="replaceMe">Tom</pre>
<pre id="replaceMe">Dick</pre>
<pre id="replaceMe">Harry</pre>

Answer 1

setTimeout在 for循环在for循环执行完成后运行。所以，你总是看到最后一个值。要解决这个问题，您可以使用 $.each提供回调函数或使用立即调用函数表达式的方法。

更详细的信息:https://codehandbook.org/understanding-settimeout-inside-for-loop-in-javascript/

var data=[];
for(var i=0; i<10; i++){
  data.push(i+' lorem ipsum doloret');
}
 

$.each(data, function(i, el){

 
    setTimeout(function(){
         $("#replaceMe").replaceWith('<pre id="replaceMe">' + data[i] + '</pre>');
    },500 + ( i * 1000 ));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="replaceMe">***</pre>