遞歸調用setTimeout函數並傳遞一個匿名函數

Question

我對此語法之間的區別感到困惑：

var timerId;
 function clockStart(){
    // debugger;
    if(timerId){
      return;
    }
    update();
    // THIS LINE BELOW *********************************************
    var timerId = setTimeout(function(){clockStart()}, 1000);
  }
    function clockStop(){
      timerId = null;
    }
    function update(){
      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      if(hours < 10) {
        hours = '0'+hours;
      }
      document.getElementById('hour').innerHTML = hours;
      if(minutes < 10){
        minutes = 0+minutes;
      }
      document.getElementById('min').innerHTML = minutes;
      if(seconds < 10){
          seconds = '0' + seconds;
      }
      document.getElementById('sec').innerHTML = seconds;
    }

我提供了被調用的兩個函數，但是我不了解的該函數的主要部分是為什么我需要傳遞一個匿名函數來調用我的clockStart（）函數。

使用以下語法時，我的函數可以正常工作：

    var timerId = setTimeout(function(){clockStart()}, 1000);

但是當我使用時它不起作用：

    var timerId = setTimeout(clockStart(), 1000);

我已經在這兩個功能上工作了一段時間，老實說，我偶然發現了這兩個功能。 除了調用ClockStart函數外，我真的看不到匿名函數在做什么。 但是我認為，由於我的clockStart（）函數正在調用自身，因此應該每秒（1000ms）被調用一次，那么為什么它需要一個匿名函數來調用它呢？ 它不應該自己調用嗎？

如果您想查看此數字“時鍾”的完整代碼，請查看我的代碼筆鏈接 。

Answer 1

這行：

var timerId = setTimeout(clockStart(), 1000);

正在立即調用clockStart()並將該函數的返回結果傳遞給setTimeout() 。 由於該函數不返回任何內容，因此您可以有效地執行以下操作：

clockStart();
var timerId = setTimeout(undefined, 1000);

這顯然不能滿足您的要求。

---

您可以改用以下方法：

var timerId = setTimeout(clockStart, 1000);

在這種情況下，您希望將函數引用傳遞給setTimeout() ，這意味着您不包括括號。 當您包含括號時，表示立即執行。 當您僅傳遞函數名稱時，它只是對該函數的引用（將其setTimeout()一個句柄）， setTimeout()可以在以后對該函數進行調用。 那正是你想要的。

執行此操作時：

var timerId = setTimeout(function(){clockStart()}, 1000)

您只是在定義一個匿名函數，並將對該匿名函數的引用傳遞給setTimeout() ，效果很好，但是在這種情況下不是必需的，因為您可以像上面第三個代碼示例中那樣傳遞clockStart名稱。

---

由於您詢問了函數以后如何調用某些內容，因此我將向您展示一個簡單的示例。 這是一個需要一個開始值，一個結束值，一個增量和一個回調函數的函數。 這將調用回調並將其遞增的值傳遞給它，直到該值超過最終值為止。

// define an increment function that will call a callback
// multiple times based on the start, end and increment arguments
function eachIncrement(start, end, increment, callback) {
    // the function argument named callback contains
    // a function reference
    var val = start;
    while (val <= end) {
        // execute the function reference and 
        // pass it the current val
        callback(val);
        val += increment;
    }
}

// define a function that we want to be called later
function processValues(num) {
    // this will get called multiple times with 
    // values 1, 4, 7, 10
}

// set up the increment parameters and pass a function reference
eachIncrement(1, 10, 3, processValues);