Question

function windowResize() {
  someFunction();
  console.log("test3");
}

function someFunction(){
  console.log("test");
  longExecutingFunctionWithAsyncReq();
  console.log("test2");
}

function longExecutingFunctionWithAsyncReq() {
  // some codes here
}

每当调整窗口大小（缩小/缩小）时，都会调用此函数。但是，如果用户阻止缩放，someFunction()将没有时间完成，然后会导致错误。

我正在考虑通过停止当前操作然后处理新操作来解决此问题。此外，我已经尝试阅读Deferred and Promise，但我无法理解这个主题的简单性，我不确定它是否真的解决了我的问题。另外，我还检查了callbacks，并且非常怀疑这不会解决我的问题。

如果我的解决方案不可行，我想只是排队操作，但缺点可能是，如果不加以控制，队列可能会溢出。至于这个解决方案，除了阅读about it之外，我还没有看到更远的东西。

Answer 1

你可以使用timeout并在调用resize函数时重置它之前清除它：

var myTimeout;
function windowResize() {
   clearTimeout(myTimeout);
   myTimeout = setTimeout(someFunction, 500);
}

这样，当用户停止调整大小并经过500毫秒时，将调用该函数。

Answer 2

如果你只需要等待操作完成就可以设置一个标志。

var working = false;
function windowResize() {
  if (!working){
      working = true;
      someFunction();
      console.log("test3");
  }

}

function someFunction(){
  console.log("test");
  longExecutingFunctionWithAsyncReq();
  console.log("test2");
}

function longExecutingFunctionWithAsyncReq() {
  // some codes here
  // on finish set working to False
}

Answer 3

var isStillWorking = false;

function windowResize() {
  if(isStillWorking) {
    // Do nothing.
  } else {
    someFunction(function(){
      isStillWorking = false;
    });
    console.log("test3");
  }
}

function someFunction(callback){
  isStillWorking = true;
  console.log("test");
  longExecutingFunctionWithAsyncReq();
  console.log("test2");
}

function longExecutingFunctionWithAsyncReq() {
  // some codes here
}

为了澄清Anton's answer的更多内容，我设法使用标志[global]变量和回调来实现相同的功能。我使用回调以flag=false，因为我还需要在重置标志之前等待函数内的异步请求完成。

停止当前操作并继续进行另一个（新）操作

3 个答案: