如何在函数执行完毕前禁用Button，避免功能未完成时按钮提前启用

核心问题原因 #

你的所有问题本质都是JavaScript异步执行机制导致的：定时器、网络请求等属于异步任务，不会阻塞主线程的同步代码执行，同步代码会先跑完，才会执行异步队列里的任务。

各版本代码问题&优化方案 #

1. 初始版本问题

你在调用doSomethingFunction()后立刻解禁按钮，此时doSomethingFunction里的异步逻辑还没执行，按钮会被直接激活，和你的预期不符。

2. Promise版本的可行性&优化

你的Promise写法逻辑是对的，但有两个可优化的点：

• 普通函数作为then回调时this指向会偏移，可能导致按钮解禁失败
• 没有添加错误处理，一旦逻辑报错Promise状态变为rejected，按钮会永远处于禁用状态

优化后的参考代码：

class TestClass
{
    static doSomethingFunction() {
        return new Promise(function (resolve, reject) {
            setTimeout(function () { 
                console.log("function is done");  
                resolve();
                // 业务逻辑出错时可调用reject抛出错误
            }, 5000);
        })
    }
}

$("#myButton").click(async function() {
    const $btn = $(this);
    $btn.prop("disabled", true);
    try {
        await TestClass.doSomethingFunction();
    } catch (err) {
        console.error('执行失败', err);
    } finally {
        // 无论成功失败都解禁按钮
        $btn.prop("disabled", false);
    }
});

3. 回调版本的问题&修正

你把回调函数的调用放在了setTimeout外部，所以主线程执行完定时器的注册逻辑后，会立刻执行回调，才会出现completely done比function is done先输出的问题，把回调调用挪到定时器内部的异步逻辑末尾即可：

class TestClass
{
    static doSomethingFunction(callback) {
        setTimeout(function () { 
            console.log("function is done");
            if(typeof callback === 'function'){
                callback();
            }
        }, 2000);
    }
}

$("#myButton").click(function() {
    const $btn = $(this);
    $btn.prop("disabled", true);

    TestClass.doSomethingFunction(function(){
        console.log("completely done");
        $btn.prop("disabled", false);
    });
});

最佳实践建议 #

• 所有异步场景都要加错误兜底，避免异常导致按钮永久禁用
• 优先用async/await语法处理Promise，代码可读性更高
• 如果是高频操作场景可以额外添加防抖逻辑，避免重复触发

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