Question

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

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

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

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

如果用户在fn_name_2()进行过程中单击fn_name_1()，则会弄乱fn_name_1()。

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

基本上我想：

场景1

用户点击fn_name_2()按钮，检查fn_name_1()是否正在运行，如果不是，请按正常方式执行fn_name_2()。

场景2

用户按下fn_name_2()按钮，检查fn_name_1()是否正在运行，是否已经停止，等待完成，在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
}

仅当其他完成时才执行功能，否则执行-在完成JS之后立即执行

3 个答案: