在 jQuery 中拥有多个 "setTimeout" 的最佳方法是什么？

Question

我有不同的操作需要延迟进行。这段代码有效，但我觉得这不是最好的方法。有人有推荐吗？

$('.block-container').on('mouseout', function() {
    var $el = $(this);
  setTimeout(function(){
  $el.find('.block-values').removeClass('hover-rotate');
  $el.find('.text-under').removeClass('hover');
    }, 500);
});
$('.block-container').on('mouseout', function() {
    var $el = $(this);
  setTimeout(function(){
  $el.find('.values-text').removeClass('hover');
  $el.find('.plus-container').removeClass('hover');
    }, 600);
});

Answer 1

在第一个中调用第二个 setTimeout 而不是创建两个处理程序。

$('.block-container').on('mouseout', function () {
    var $el = $(this);
    setTimeout(() => {
        $el.find('.block-values').removeClass('hover-rotate');
        $el.find('.text-under').removeClass('hover');
        setTimeout(() => {
            $el.find('.values-text').removeClass('hover');
            $el.find('.plus-container').removeClass('hover');
        }, 100)
    }, 500);
});

另一种可能更容易一目了然地理解的方法，等待延迟函数。

const delay = ms => new Promise(res => setTimeout(res, ms));
$('.block-container').on('mouseout', async function () {
    const $el = $(this);
    await delay(500);
    $el.find('.block-values').removeClass('hover-rotate');
    $el.find('.text-under').removeClass('hover');
    await delay(100);
    $el.find('.values-text').removeClass('hover');
    $el.find('.plus-container').removeClass('hover');
});

在 jQuery 中拥有多个 "setTimeout" 的最佳方法是什么？

What's the best way to have multiple "setTimeout" in jQuery?

javascript

jquery

delay

settimeout