在执行代码时setInterval（）暂停

Question

我的印象是setInterval(function, delay)会安排每个delay毫秒调用一次function 。 它将重复执行此操作，直到调用clearInterval()为止。 但是，似乎我缺少了一些东西。

我有以下示例页面。 目的很简单：从“ 加载” ->“ 加载”中切换文本。 ->每秒加载 。 这是按预期方式工作的循环示例：

  $(document).ready(function(){ $('#loading_icon').html("Loading"); loop = setInterval(function() { updateText(); }, 1000); }); function updateText() { loadingText = $('#loading_icon').html(); $('#loading_icon').html(loadingText == "Loading" ? "Loading." : loadingText == "Loading." ? "Loading.." : "Loading"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="loading_icon">Loading</div> 

没什么 问题是，只要JavaScript在做其他事情，它就不会执行此代码。 我设置了以下示例：

  $(document).ready(function(){ $('#loading_icon').html("Loading"); loop = setInterval(function() { updateText(); }, 1000); for(i = 0; i < 100000; i++) var a = fib(i); // Just an arbitrary method to simulate work }); function fib(n){ var a=1,b=0,t;while(n>=0){t=a;a=a+b;b=t;n--;}return b; } function updateText() { loadingText = $('#loading_icon').html(); $('#loading_icon').html(loadingText == "Loading" ? "Loading." : loadingText == "Loading." ? "Loading.." : "Loading"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="loading_icon">Loading</div> 

理想情况下，在我们完成所有这些工作时，文本会发生变化（毕竟，这就是我编写此“加载”功能的全部原因）。 但是，似乎没有调用updateText()的调用，直到JS没事做。

我在这里想念什么？ 有什么办法可以实现我的追求吗？

Answer 1

是的，它仍然有效-问题是先运行fib循环，然后再运行setInterval 。 您可以减小循环长度以使其工作正常：

 $(document).ready(function() { $('#loading_icon').html("Loading"); loop = setInterval(function() { updateText(); }, 1000); for (i = 0; i < 100000; i++) var a = fib(i); // Just an arbitrary method to simulate work }); function fib(n) { var a = 1, b = 0, t; while (n >= 0) { t = a; a = a + b; b = t; n--; } return b; } function updateText() { loadingText = $('#loading_icon').html(); $('#loading_icon').html(loadingText == "Loading" ? "Loading." : loadingText == "Loading." ? "Loading.." : "Loading"); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="loading_icon">Loading</div> 

不幸的是，您不能进行非常长的循环，而setInterval完全同时运行。

Answer 2

您对setInterval()理解似乎是正确的。 它不应在其回调函数之外暂停代码。 您的代码很可能在其他地方陷入困境。

至于要完成的工作，您的解决方案应该可以工作，但这不是操纵DOM的一种非常优雅的方法。 我看到您正在使用jQuery，它具有强大的动画功能 。 我会考虑使用这样的东西。