在不阻塞UI的情况下迭代数组的最佳方法

Question

在不阻塞UI的情况下迭代数组的最佳方法

我需要迭代一些大型数组，并通过API调用将它们存储在主干集合中。什么是最好的方法来做到这一点，而不让循环导致接口变得没有响应？

由于返回的数据非常大，Ajax请求的返回也会阻塞。我认为我可以将其拆分，并使用setTimeout使其以较小的块异步运行，但是否有更简单的方法来做到这一点。

我认为一个网络工作者会很好，但是它需要改变一些保存在UI线程上的数据结构。我尝试使用它来执行Ajax调用，但是当它将数据返回给UI线程时，接口仍然没有响应。

提前谢谢

Answer 1

这是一个演示执行这个“异步”循环。它将迭代“延迟”1ms，在此延迟内，它为UI提供了做某事的机会。function&nbsp;asyncLoop(arr,&nbsp;callback)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;(function&nbsp;loop(i)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//do&nbsp;stuff&nbsp;here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(i&nbsp;<&nbsp;arr.Length)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//the&nbsp;condition &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(function()&nbsp;{loop(++i)},&nbsp;1);&nbsp;//rerun&nbsp;when&nbsp;condition&nbsp;is&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//callback&nbsp;when&nbsp;the&nbsp;loop&nbsp;ends &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}(0));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//start&nbsp;with&nbsp;0}asyncLoop(yourArray,&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//do&nbsp;after&nbsp;loop&nbsp;&nbsp;});//anything&nbsp;down&nbsp;here&nbsp;runs&nbsp;while&nbsp;the&nbsp;loop&nbsp;runs有其他的选择，比如网络工作者而目前拟议的setImmediate哪个是AFAIK论IE，加上前缀。