Question

要求很简单，由于某些原因我无法解决这个问题。外部函数调用内部函数。内部函数是异步的，如果条件匹配则调用内部函数成功。一切都很好 - 现在用户可以在内部功能正在进行时运行外部功能。我希望内部功能立即停止工作，然后重新开始。

document.getElementById("demo").addEventListener("click", function()  {
 demo_click();
});
//
function demo_click() {
 var idnum = 0;
 var length = 25;
 innerFunc();
 //
 function innerFunc() {
  if (idnum < length) {
   console.log(idnum);
   setTimeout(function() {
    idnum++;
    innerFunc();
  }, 500);
  }
 }
}

按预期从0到24记录。这是小提琴 - https://jsfiddle.net/h7ab8u69/2/

解决方案可能微不足道，但请建议我放置条件的地点/位置。

修改

从重新开始，我的意思是之前的innerFunc调用将停止，它将从零开始记录（控制台）。它仍然从零开始，但如果你点击两次，三次等等 - 日志（控制台）也将出现在之前的innerFunc调用中。请访问以上小提琴链接并打开控制台并单击按钮 - 问题将很明显。

PS

SetTimeout只是显示异步调用。在我的代码中，这是Image.onLoad事件。因此，清除超时不是一种选择。基本上，我是按钮点击一个接一个地加载图像。我想停止先前加载并在另一次点击时开始新加载。为简单起见，我使用了SetTimeout。

//var imgArray = [‘0.jpg’, ‘1.jpg’, ‘2.jpg’ and so on]
  function innerFunc() {
    var img = new Image;
    img.onload = function() {
      //draw this image on canvas
      //code to draw
      // draw next only if some condition is correct
      if (idnum < length) {
        idnum++;
        innerFunc();
      }
    };
    img.src = imgArray[idnum];
  }

Answer 1

我明白你想要运行一些代码并在再次运行外部函数时停止它。如果没有超时，则需要使用全局变量。

var clickCount=0;

function demo_click() {
 var idnum = 0;
 var length = 25;
 clickCount++;
var thisCount = clickCount;
// stop the loop before starting again

 innerFunc();
  function innerFunc() {
    if (idnum < length) {
     console.log(idnum);



     for(var i =0 ; i < imgarraylength; i++){
       if(thisCount < clickCount){
         break;
       }
       idnum++;
       innerFunc();
     }
    }
  }
}

希望它有所帮助。

防止内部功能运行

1 个答案: