jQuery each 中使用 sleep 延迟

教程 shanhuhai 2593℃ 0评论

在 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 延迟

付费咨询
喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址