即使外部函數被多次觸發，返回的內部函數如何引用相同的外部函數變量？

Question

我試圖了解這個去抖動功能是如何工作的：

const myInput = document.getElementById("myInput");

myInput.addEventListener(
    "keyup",
    debounce( helloWorld, 2000 )
);

function debounce( callback, delay ) {
    let timeout;
    return function() {
        clearTimeout( timeout );
        timeout = setTimeout( callback, delay );
    }
}

據我了解，每次有人執行“keyup”操作時，都會觸發一個新的 debounce 函數並將其添加到調用堆棧中。 現在我相信這些去抖動函數中的每一個都有其內部函數作用的獨立的“超時”概念。 然而，實際情況似乎是，當多次執行“keyup”時，返回的多個內部函數似乎都共享對同一個“超時”變量的引用，這使得該函數可以工作。

我的問題是，我的理解在哪里崩潰了？ 當多次觸發“keyup”時，是否有多個去抖動函數進入調用堆棧？ 或者它只是一個具有一個超時變量的函數，但具有多個返回函數？

Answer 1

debounce被調用一次。 然后每次釋放鍵時調用內部函數。

您可以通過在debounce中添加一個console.log來檢查這一點

傳遞給addEventListener的第二個參數是debounce的 inne 函數

初始化監聽器時，內部函數也只創建一次。 每次偵聽器觸發時都會調用此函數。