在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');
});