时间戳

首页 > 解决方案 > 替换内容

在等待时循环

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

问题描述

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

在一个cshtml页面上，我有一个ajax与按钮点击相关的功能。这会路由回我的控制器，并将一个 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>数组中包含的文本替换 的内容。我希望每次迭代都能看到足够长的时间，以便人类在进行下一次迭代之前看到它并观察变化（~1000ms）。

例如，如果数组包含"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>

标签： javascriptjquery

解决方案

setTimeoutin a forloop 在 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>

推荐阅读