问题描述
使用jQuery'.each()'在一组元素上插入每个枚举的'pause'的最佳/推荐方式是什么?
What is the best/recommended manner in which to insert a 'pause' with each enumeration over a set of elements using the jQuery '.each()'?
$( '.someClass' ).each( function() {
$( this ).trigger( 'click' ); //fire some request that appends a new div on the body
//wait for div to be appended to the DOM. perhaps use the pause here
//execute code once the div has been appended
});
推荐答案
从技术上讲,你不能这样做在您的代码中建模,因为JavaScript是单线程的,并且通常在浏览器(或选项卡)UI线程上运行 - 任何睡眠/延迟都会阻止浏览器重绘页面,也会阻止用户与页面交互。
Technically, you can't do this as you have modeled in your code, since JavaScript is single-threaded, and usually runs on the browser (or tab) UI thread -- any sleep/delay will block the browser from redrawing the page and will also prevent user interaction with the page.
您需要安排浏览器定期调用您的代码。像这样的东西可以解决这个问题:
You need to arrange for the browser to invoke your code periodically. Something like this will do the trick:
var objects = $.makeArray($( '.someClass' ));
var callback;
callback = function() {
var item = objects.shift();
// Do something with item.
if (objects.length != 0) {
setTimeout(callback, 5000);
}
}
setTimeout(callback, 5000);
参见。
此解决方案假定您希望每个项目在最后一个项目完成处理后5秒内处理。这意味着:
This solution assumes that you want each item to be processed 5 seconds from the time that the last item finished processing. This means that:
- 如果您在处理每个
confirm()
或其他内容时item,下一个项目将在用户关闭对话框5秒后处理。 - 总执行时间为(5000N + T)其中N是项目数初始列表,T是处理每个项目所需的总时间。
- If you do
confirm()
or something while processing each item, the next item will be processed 5 seconds from the time that the user closes the dialog. - The total execution time will be (5000N + T) where N is the number of items in the initial list, and T is the total time it takes to process each item.
这是一个可以使用的功能,它封装了这个功能:
Here's a function you can use that encapsulates this functionality:
jQuery.eachWithDelay = function(sequence, delay, callback) {
var objects = jQuery.makeArray(sequence);
if (objects.length == 0) {
return;
}
var f;
f = function() {
var item = objects.shift();
if (callback(item) && objects.length != 0) {
setTimeout(f, delay);
}
};
setTimeout(f, delay);
};
被称为:
$.eachWithDelay($('.someClass'), 5000, function(item) {
// Do something with item
return true; // Return true to continue iterating, or false to stop.
});
参见。
这篇关于在.each枚举中插入“暂停”的最佳方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!