Question

我正在制作一个树遍历程序，使用setInterval动画遍历。当setInterval正在运行时，我想禁用“run traversal”按钮，这样它们就无法继续运行新的遍历。

当遍历结束并且间隔被清除时，我想重新启用按钮。一个stackoverflow答案建议使用回调来在间隔结束后调用enableButtons ...

this.traverseNodes(nodesToDraw, aryList, e.target.id, this.enableButtons);

 api.traverseNodes = function (nodesToDraw, dataStructureList, algType, enableButtonsCallback) {
         ...
        var myInterval = setInterval (function() {
                            if (i >= nodesToDraw.length-1) {
                                matrixTraversalRunning = false;
                                enableButtonsCallback(dsTraversalRunning, matrixTraversalRunning);
                                clearInterval(myInterval);
                            }

这很好，但后来想...为什么我需要回调？我可以在间隔结束后直接调用enableButtons，如下：

this.traverseNodes(nodesToDraw, aryList, e.target.id);

api.traverseNodes = function (nodesToDraw, dataStructureList, algType) {
       ...
        var myInterval = setInterval (function() {
            if (i >= nodesToDraw.length-1) {
                self.enableButtons(dsTraversalRunning); //call function to enable buttons
                clearInterval(myInterval);
            }
            ...

由此，我对何时使用回调感到困惑。这有必要吗？

Answer 1

不，这没有必要。

但是，使用回调将允许您在具有不同布局的不同页面上使用相同的类进行树遍历。例如，您可能希望在一个页面上启用/禁用三个按钮，而在另一个页面上只启用一个按钮。

以下是一个例子：

＆＃13;

//First I'll create a fake tree class for performing work:
var FakeTree = function(size){
  this.size = size;
  
  //Create a fake method to simulate node traversal
  var _this = this;
  this.TraverseOneNode = function(){
    _this.size = Math.max(_this.size - 1, 0);
    return (_this.size == 0);
  }
}

//Now define function for traversal
function TraverseNodes(tree, callbackfn){
  var myInterval = window.setInterval( function(){
    if(tree.TraverseOneNode()){
      clearInterval(myInterval);
      callbackfn();
    }
  }, 500);
}


//Now define callbacks for the two button sets:
function button_one_callback(){
  //Enable button1
  $('#button1').removeAttr('disabled');
}

function button_two_callback(){
  //Enable button2, and buttonOK
  $('#button2').removeAttr('disabled');
  $('#buttonOK').removeAttr('disabled');
}


//Button onclick functions:
function button_one_click(){
  //Disable button one
  $('#button1').prop("disabled",true);
  
  //Call "TraverseNodes", pass it a new FakeTree of size=5, and the callback for this button
  TraverseNodes(new FakeTree(5), button_one_callback);
}

function button_two_click(){
  //Disable button one
  $('#button2').prop("disabled",true);
  $('#buttonOK').prop("disabled",true);
  
  //Call "TraverseNodes", pass it a new FakeTree of size=10, and the callback for this button
  TraverseNodes(new FakeTree(10), button_two_callback);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button1" value="Traverse Tree 1" onclick="button_one_click()" />
<br />
<br />
<input type="button" id="button2" value="Traverse Tree 2" onclick="button_two_click()" />
<input type="button" id="buttonOK" value="OK" />

＆＃13;

Answer 2

使用w3schools的这个例子：

setInterval(function(){ alert("Hello"); }, 3000);

链接了解更多示例： https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval http://www.w3schools.com/jsref/met_win_setinterval.asp

间隔结束时使用回调

2 个答案: