在jQuery中实现多个setTimeout延时任务的最优方案是什么？

原有代码存在的问题 #

• 对同一个.block-container重复绑定了两次mouseout事件监听器，产生不必要的性能开销
• 重复声明$el变量、重复查询DOM元素，存在冗余代码
• 没有处理鼠标快速移出移入的场景，未执行的定时器会叠加，导致类名操作时序混乱

基础优化版本 #

合并事件监听，新增定时器防重叠逻辑：

$('.block-container').on('mouseout', function() {
    const $el = $(this);
    // 先清空之前未执行的延时任务，避免快速操作时逻辑混乱
    clearTimeout($el.data('timer500'));
    clearTimeout($el.data('timer600'));

    // 500ms延时类名移除操作
    const timer500 = setTimeout(function() {
        $el.find('.block-values').removeClass('hover-rotate');
        $el.find('.text-under').removeClass('hover');
    }, 500);
    // 600ms延时类名移除操作
    const timer600 = setTimeout(function() {
        $el.find('.values-text').removeClass('hover');
        $el.find('.plus-container').removeClass('hover');
    }, 600);

    // 存储定时器ID到元素数据中，方便后续清除
    $el.data('timer500', timer500).data('timer600', timer600);
});

可扩展优化版本 #

如果后续需要新增更多不同延时的操作，可以将操作配置化，降低后续维护成本：

// 统一配置所有延时操作，新增/修改需求只需调整该配置
const delayActionConfig = [
    {
        time: 500,
        operate: ($container) => {
            $container.find('.block-values').removeClass('hover-rotate');
            $container.find('.text-under').removeClass('hover');
        }
    },
    {
        time: 600,
        operate: ($container) => {
            $container.find('.values-text').removeClass('hover');
            $container.find('.plus-container').removeClass('hover');
        }
    }
];

$('.block-container').on('mouseout', function() {
    const $this = $(this);
    // 清空所有未执行的旧定时器
    const oldTimers = $this.data('delayTimers') || [];
    oldTimers.forEach(timerId => clearTimeout(timerId));

    // 按配置生成新定时器
    const newTimers = delayActionConfig.map(item => {
        return setTimeout(() => item.operate($this), item.time);
    });
    $this.data('delayTimers', newTimers);
});

额外优化建议 #

如果对应类名移除是配合CSS过渡动画使用，也可以直接通过CSS的transition-delay属性控制不同元素的样式切换延时，不需要依赖JS定时器，性能更好，逻辑更简洁。

内容的提问来源于stack exchange，提问作者Samuel Charpentier