反Bounce函数在javascript中不起作用

我很难理解为什么下面的去盎司代码不起作用

您可以在以下内容中看到以下代码：

`
HTML:
JS:
让新价值；
设计数器=0；
常量getData=（）=>{
//对API的伪调用并获取数据
log（“获取数据…”，newValue，counter++）；
}
常数反盎司=函数（fn，d）{
让定时器；
返回函数（）{
清除超时（计时器）；
计时器=设置超时（（）=>{
fn（）；
}（d）；
}
}
常量betterFunction=（{target:{value}}）=>{
newValue=值；
去抖动（getData，2000）；//**第1行**。放置这行代码去抖动不会发生
intermediate（）//**第2行**。将这行代码替换为上面的行去抖动有效
}
常数中间=去盎司（getData，2000）；
`

---

我知道debounce函数返回另一个函数，它在JavaScript中的作用类似于闭包，但为什么上面的第1行代码不起作用，而第2行代码起作用

debounce(getData, 2000);

dobounce

函数不需要返回函数。您只需执行以下步骤即可实现

debounce

功能：

检查

计时器是否未定义。如果没有，这意味着我们需要取消一个超时

之后，通过调用

setTimeout（）

设置一个新的计时器，该计时器在特定时间后调用给定函数

另外，

timer

不应该是局部变量，因为您不希望在调用

debounce

函数时重置它

let计数器=0；
让新价值；
让定时器；
常量getData=（）=>{
log（“获取数据…”，newValue，counter++）；
}
常数反盎司=函数（fn，d）{
中频（定时器）{
清除超时（计时器）；
}
定时器=设置超时（fn，d）；
}
常数betterFunction=（e）=>{
newValue=e.target.value；
去盎司（getData，2000）；
}

---

debounce

函数返回一个函数，该函数在调用

debounce

时作为

debounce(getData, 2000);

dobounce

函数不需要返回函数。您只需执行以下步骤即可实现

debounce

功能：

检查

计时器是否未定义。如果没有，这意味着我们需要取消一个超时

之后，通过调用

setTimeout（）

设置一个新的计时器，该计时器在特定时间后调用给定函数

另外，

timer

不应该是局部变量，因为您不希望在调用

debounce

函数时重置它

let计数器=0；
让新价值；
让定时器；
常量getData=（）=>{
log（“获取数据…”，newValue，counter++）；
}
常数反盎司=函数（fn，d）{
中频（定时器）{
清除超时（计时器）；
}
定时器=设置超时（fn，d）；
}
常数betterFunction=（e）=>{
newValue=e.target.value；
去盎司（getData，2000）；
}

---

我希望您想要的：

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;

---

我希望你想要的是：

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;

---

debounce函数应该包装betterFunction调用，然后在超时时调用betterFunction，首先调用betterFunction，然后调用debouncedebounce函数应该包装betterFunction调用，然后在超时时调用betterFunction，你先调用betterFunction，然后调用Debounce你的解释很好，它真的帮助我更好地理解闭包是如何工作的。我注意到的一件事是，您的答案是，在betterFunction（在第二段代码片段中）中，不需要将getData和2000传递给intermediate（getData，2000）。不需要将getData和2000传递给intermediate-是的，当然，这是不必要的，我在回答时没有注意到这一点。更新了第二个代码段。您的解释非常好，它确实帮助我更好地理解闭包是如何工作的。我注意到的一件事是，您的答案是，在betterFunction（在第二段代码片段中）中，不需要将getData和2000传递给intermediate（getData，2000）。不需要将getData和2000传递给intermediate-是的，当然，这是不必要的，我在回答时没有注意到这一点。更新了第二个代码段。