仅当其他完成时才执行函数，如果不是 - 等待并在完成后立即执行 JS

Question

我在页面上有两个onclick函数：

function fn_name_1() {
//do buch of stuff
}
function fn_name_2() {
//do buch of stuff
}

当用户单击fn_name_1()时，它开始执行，这需要一段时间(大约 4 秒才能完成(。

如果用户在fn_name_1()正在进行时单击fn_name_2()，则会弄乱fn_name_1()。

我曾试图setTimeOut几秒钟fn_name_2()但这是一种糟糕的用户体验，因为当他们按下按钮时，他们希望他们的操作立即得到结果。

基本上我想：

场景 1

用户点击fn_name_2()按钮，检查fn_name_1()是否正在运行，如果没有 - 继续正常执行fn_name_2()。

场景 2

用户点击fn_name_2()按钮，检查fn_name_1()是否正在运行，如果它 dit，等待完成并在fn_name_1()完成后立即开始自动执行。

如何解决？

Answer 1

最简单的方法是拥有一个两个函数都可以访问的变量：

let runningTestOne = false;
function testOne(callback) {
console.log('Starting testOne');
runningTestOne = true;

setTimeout(() => {
runningTestOne = false;
console.log('done with testOne');
if (callback) {
callback();
}
}, 5000);
};
function testTwo() {
if (runningTestOne) {
console.log('cannot run');
return;
} else {
console.log('can run test two');
}
};
function runWithCallback() {
testOne(testTwo);
}

<button onclick="testOne()">Test One</button>
<button onclick="testTwo()">Test Two</button>
<button onclick="runWithCallback()">With callback</button>

Answer 2

使fn_name_1异步，并让它返回一个承诺，然后你可以存储该承诺，并且仅在承诺解决时才执行第二个任务：

function fn_name_1() {
//do buch of stuff
return new Promise(resolve => {
setTimeout(resolve, 1000);
});
}
let isDone = fn_name_1();
function fn_name_2() {
isDone.then(() => {
//do buch of stuff
});
}

Answer 3

这样的东西？

var wait=false;
function fn_name_1() {
wait=true;
//do bunch of stuff
wait=false;
}
function fn_name_2() {
while(wait){/*do nothing*/}
//do bunch of stuff
}