去抖 function 在 javascript 中不起作用

Question

我無法理解為什么下面的去抖代碼不起作用？

您可以在以下代碼中看到以下代碼： link

`
HTML:

<input type="text" onkeyup="betterFunction(event)"/>

JS:

let newValue;
let counter = 0;
const getData = () => {
    // dummy call to API and get Data
    console.log("Fetching Data ..", newValue,counter++);
}

const debounce = function (fn, d) {
    let timer;
    return function () {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn();
        }, d);
   }
}

const betterFunction = ({target:{value}}) => {
    newValue=value;
    debounce(getData, 2000); // **line 1**. placing this line of code debouncing does not happen
  
    intermediate()  // **line 2**. replacing this line of code with the above line debouncing works
}

const intermediate = debounce(getData, 2000);

`

我知道去抖 function 返回另一個 function 就像 JavaScript 中的閉包一樣，但是為什么上面的第 1 行代碼不起作用，但是第 2 行代碼不起作用

Answer 1

debounce function 返回一個 function 當你調用debounce時它永遠不會被調用

debounce(getData, 2000);

dobounce function 不需要返回 function。 您只需要執行以下步驟即可實現debounce function：

1. 檢查timer是否未定義。 如果不是，這意味着我們需要取消超時。

2. 之后，通過調用setTimeout()設置一個新計時器，該計時器在特定時間后調用給定的 function。

此外， timer不應該是局部變量，因為您不希望在調用debounce function 時重置它。

 let counter = 0; let newValue; let timer; const getData = () => { console.log("Fetching Data..", newValue, counter++); } const debounce = function(fn, d) { if (timer) { clearTimeout(timer); } timer = setTimeout(fn, d); } const betterFunction = (e) => { newValue = e.target.value; debounce(getData, 2000); }

 <input type="text" onkeyup="betterFunction(event)" />

If you don't want to declare timer as a global variable and want to return a function from debounce function, then you need to call the debounce function once initially and whenever keyup event fires on the input element, you call the function returned from the debounce function 而不是調用debounce function。

 let counter = 0; let newValue; const getData = () => { console.log('Fetching Data..', newValue, counter++); }; const debounce = function(fn, d) { let timer; return function() { if (timer) { clearTimeout(timer); } timer = setTimeout(fn, d); }; }; const intermediate = debounce(getData, 2000); const betterFunction = (e) => { newValue = e.target.value; intermediate(); };

 <input type="text" onkeyup="betterFunction(event)" />

Answer 2

我希望你想要什么：

let counter = 0;
// you need to define timer and newValue here first
let timer , newValue;

// defining input as varible for good usage better than usage in html
var input = document.querySelector("#inp");

const getData = () => {
    // increment first better than in console :)
    counter+=1;
    console.log("Fetching Data .." , newValue , counter);

    // as last step clear timer for next timeout
    clearTimeout(timer);
}

// givin value direct to timer directlly worked better than return
const debounce = function (fn, d) {
    timer = setTimeout(fn, d);
}


const betterFunction = () => {
    // newvalue must equal input value
    newValue = input.value;
    // and then calling debounce as last step
    debounce(getData, 2000);
}

// here giving onkeyup event to input for getting values and start working :)
input.onkeyup = betterFunction;