如何在密集的JavaScript处理过程中（简要地）向浏览器提供控制权？

本文介绍了如何在密集的JavaScript处理过程中（简要地）向浏览器提供控制权？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我已阅读此处关于在密集期间使用setTimeout（）的帖子DOM处理（使用JavaScript），但如何将此功能与下面的代码集成？以下代码适用于少量选项，但当选项数量太大时，我的请等待动画GIF会在本地JavaScript处理时冻结。谢谢！

I have read the post here about using setTimeout() during intensive DOM processing (using JavaScript), but how can I integrate this function with the below code? The below code works fine for a small number of options, but when the number of options gets too big my "please wait" animated GIF freezes while the local JavaScript is processing. Thanks!

function appendToSelect() { $("#mySelect").children().remove() ; $("#mySelect").html( '<option selected value="' + obj.data[0].value + '">' + obj.data[0].name + '</option>' ); var j = 1 ; for (var i = 1; i < obj.data.length; i++) { $("#mySelect").append( '<option value="' + obj.data[i].value + '">' + obj.data[i].name + '</option>' ); } }

推荐答案

这里是一个解决方案：

function appendToSelect() { $("#mySelect").children().remove(); $("#mySelect").html( '<option selected value="'+obj.data[0].value+'">' + obj.data[0].name + '</option>' ); obj.data.splice(0, 1); // we only want remaining data var appendOptions = function() { var dataChunk = obj.data.splice(0, 10); // configure this last number (the size of the 'chunk') to suit your needs for(var i = 0; i < dataChunk.length; i++) { $("#mySelect").append( '<option value="' + dataChunk[i].value + '">' + dataChunk[i].name + '</option>' ); } if(obj.data.length > 0) { setTimeout(appendOptions, 100); // change time to suit needs } }; appendOptions(); // kicks it off }

不像@Borgar的解决方案，但你明白了。基本上，我正在做同样的事情，但是在你的一个函数中，而不是像他那样将它分解为更高阶的函数。我喜欢他的解决方案，但如果你不喜欢，也许这对你有用。

Not as elegant as @Borgar's solution, but you get the idea. Basically, I am doing the same thing, but all in your one function rather than breaking it into a higher-order function like he does. I like his solution, but if you don't, perhaps this will work for you.

编辑：对于那些不要马上看到它，这个解决方案与 @ Borgar的是这个解决方案允许你设置每个超时之间处理的数据块的大小。 @ Borgar的次 - 在处理数组的每个成员之后输出。如果我有时间，我会尝试创建一个更高阶的函数来处理这个，所以它更优雅。虽然没有承诺！ ;）

For those that don't immediately see it, one of the main differences between this solution and @Borgar's is that this solution allows you to set the size of the 'chunks' of data that is processed between each timeout. @Borgar's times-out after every single member of the array is processed. If I get time, I will try to create a higher-order function to handle this so it is more elegant. No promises though! ;)

编辑：所以，这是我改编的 @ Borgar的解决方案，允许设置块大小并配置超时价值更容易：

So, here is my adaptation of @Borgar's solution, which allows for setting a 'chunk' size and configuring the timeout value more easily:

function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) { var itemIndex = 0; (function() { var remainingDataLength = (data.length - itemIndex); var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength; if(itemIndex < data.length) { while(currentChunkSize--) { workerCallback(data[itemIndex++]); } setTimeout(arguments.callee, timeout); } else if(completionCallback) { completionCallback(); } })(); } function appendToSelect() { $("#mySelect").children().remove(); $("#mySelect").html( '<option selected value="' + obj.data[0].value + '">' + obj.data[0].name + '</option>' ); obj.data.splice(0,1); // we only want remaining data incrementallyProcess(function(data) { $("#mySelect").append( '<option value="' + data.value + '">' + data.name + '</option>' ); }, obj.data, 10, 100, removeAnimatedGifFunction); // last function not required... }

希望有所帮助 - 我想这个结合了两种解决方案的优点。 注意，第二个匿名函数不再使用索引值，而只是传入整个对象（带有value和name属性）;因为当前对象的索引实际上不是通常，它在迭代事物时非常有用，IMO。

Hope that helps - I think this combines the best of both solutions. Notice, the second anonymous function no longer uses the index value, but simply passes in the entire object (with the value and name properties); that makes it a bit cleaner, since the index of the current object really isn't usually that useful when iterating over things, IMO.

我相信仍然有一些事情可以做到更好，但这仍然是读者的练习。 ;）

I am sure there are still things that could be done to make this even better, but that is left as an exercise for the reader. ;)