JavaScript中如何实现点击按钮后间隔X秒才能再次执行对应函数

你可以通过给函数添加冷却状态标记的方式实现需求，无需修改原有HTML代码，具体实现如下：

• 核心逻辑：给函数绑定一个状态属性记录是否处于冷却期，每次触发函数先校验状态，冷却期内直接终止执行，执行完业务逻辑后进入冷却，间隔指定时间后重置冷却状态。该方案将冷却状态存放在函数自身属性上，无需额外声明全局变量，不会造成作用域污染。

完整实现代码 #

HTML（和原有代码一致，无需修改）

<a onclick="skipCard('left')"></a>

JavaScript

// 自定义冷却间隔时间，单位为毫秒，示例中3000即间隔3秒，可自行调整
const SKIP_COOLDOWN = 3000;

function skipCard(direction=['left', 'right']) {
    // 冷却期内直接返回，不执行后续逻辑
    if (skipCard.isCooling) return;

    // 原有业务逻辑
    if(direction == 'left') {
        console.log('go left')
    } else if (direction == 'right') {
        console.log('go right')
    }

    // 业务逻辑执行完成后开启冷却
    skipCard.isCooling = true;
    // 冷却时间结束后重置状态，允许下次触发
    setTimeout(() => {
        skipCard.isCooling = false;
    }, SKIP_COOLDOWN)
}
// 初始化冷却状态
skipCard.isCooling = false;

如果你的业务逻辑包含异步操作（比如接口请求），可以将开启冷却的逻辑放到异步操作完成后，确保是在上一次执行完全结束后才开始计算冷却时间：

const SKIP_COOLDOWN = 3000;

async function skipCard(direction=['left', 'right']) {
    if (skipCard.isCooling) return;

    if(direction == 'left') {
        // 示例：异步请求完成后再执行后续逻辑
        await fetch('/your-api/skip-left');
        console.log('go left')
    } else if (direction == 'right') {
        await fetch('/your-api/skip-right');
        console.log('go right')
    }

    skipCard.isCooling = true;
    setTimeout(() => {
        skipCard.isCooling = false;
    }, SKIP_COOLDOWN)
}
skipCard.isCooling = false;

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