在 Javascript 的世界中, 延时是通过 setTimeout 函数来实现的, 并没有现成的 sleep 函数,只能自己实现 ,一种推荐的实现方法如下:
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms || 1000))
}
async function test() {
console.log('Hello')
await sleep(1000)
console.log('world!')
}
test()
阅读上述代码可见,此 sleep()
函数是基于 Promise
来实现的, 并且只能在异步函数中调用。
看一个实例:
$('.btn-greet').each(async function(t, el){
$(el).css({
'background-color':'green'
});
console.log(el);
await sleep(3000);
});
通过这段代码我们希望的是依次将 $('.btn-greet')
获取的所有元素,将背景色设置为green
,每次延迟 3 秒。
但是实际上这段代码是不可行的。jQuery 的 each 方法只检查返回值是否为 false(如果是则中止循环) 而不检查是否是 Promise,我们可以通过 for 循环来替代 jquery 的 each 从而实现在循环中延时执行。
将上面的代码改写为:
(async () => {
var elements = Object.entries($('.btn-greet'));
for(const el of elements) {
$(el).css({
'background-color':'green'
});
await sleep(3000);
}
})();
经过测试,此代码能够满足需求。
转载请注明:大后端 » jQuery each 中使用 sleep 延迟