如何在JavaScript函数内部实现非阻塞暂停，不延迟整个函数运行

你可以通过两种常用的异步方案实现需求，两种方案都不会阻塞主线程，也不会延迟整个函数的同步部分执行：

方案1：直接使用setTimeout封装后续逻辑 #

把修改elementTwo的逻辑放到setTimeout的回调函数中即可，这是最轻量化的实现方式：

function myFunction() {
    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // 500ms后执行回调内的逻辑
    setTimeout(function() {
        // Execute for element 2
        elementTwo.style.cssText = "some styles";
    }, 500);
}

该方案中，myFunction会执行完修改elementOne样式的同步逻辑后立刻返回，不会阻塞页面其他交互，500ms后浏览器会自动触发回调执行elementTwo的样式修改。

方案2：使用async/await实现线性写法 #

如果更偏好按顺序写逻辑的代码风格，可以封装通用等待函数，配合async语法实现：

// 通用等待工具函数，可复用在其他需要延迟的场景
function wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
    // Declare some variables
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");

    // Execute for element 1
    elementOne.style.cssText = "some styles";

    // 等待500毫秒，不会阻塞主线程
    await wait(500);

    // Execute for element 2
    elementTwo.style.cssText = "some styles";
}

async函数可以直接绑定到onclick事件上，无需额外修改触发逻辑。

补充：避免连续点击重复触发 #

如果需要防止用户短时间内多次点击触发多次执行，可以加运行状态锁：

let isActionRunning = false;
async function myFunction() {
    if (isActionRunning) return;
    isActionRunning = true;

    // 原有逻辑
    var elementOne = document.getElementById("classElementOne");
    var elementTwo = document.getElementById("classElementTwo");
    elementOne.style.cssText = "some styles";
    await wait(500);
    elementTwo.style.cssText = "some styles";

    isActionRunning = false;
}

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