替换内容 <div> 等待时循环

Question

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

在cshtml页面上，我具有一个与按钮单击相关联的ajax函数。 路由返回到我的控制器，并且json字符串数组返回给客户端。

在页面本身上，我定义了<pre id="replaceMe">***</pre> 。 我试图通过做$("#replaceMe").replaceWith('<pre id="replaceMe">' + data[i] + '</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>

Answer 1

for循环中的setTimeout在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> 

Answer 2

您可以使用setInterval函数做到这一点：

var words = ['interating', 'and', 'replacing', 'text'];
var replace = document.querySelector('#replace');
var count = 0;

function replaceText() {
  replace.innerHTML = words[count];
  if(count === words.length - 1)
    count = 0;
  else
    count++;
}

setInterval(replaceText, 1000);

---

更新：不需要替换所有元素，可以使用属性innerText替换仅内容。

Answer 3

 //pass in the data to loop over, and the index to show function updateSection(data, index) { //get a reference to the section var $section = $('#replaceMe'); //fade out the section over 500 milliseconds, then perform callback on finish $section.fadeOut(500, () => { //change the text $section.text(data[index]); //fade in the section over 500 milliseconds, and then advance the index //use modulus to reset the index to 0 when it reaches beyond the array $section.fadeIn(500, () => updateSection(data, ++index % data.length)); }); } updateSection(['Tom', 'Dick', 'Harry'], 0); 

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