Javascript 为什么我的去盎司函数返回未定义的值？

这是我的：

问题是输入值应该在2秒钟内显示，但实际情况并非如此。 我试图调试该值，但它没有定义，但我不知道为什么

---

感谢您的帮助。

看来，

delayHandler

不是一个将值作为参数发送到

debounce

的函数。您应该这样做，它会工作：

import React, { useState } from "react";
import "./styles.css";

function debounce(fn, ms, ...args) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = null;
      fn.apply(this, args);
    }, ms);
  };
}

export default function App() {
  const [value, setValue] = useState("");

  const handleChange = e => {
    const { value } = e.target;
    delayHandler(value)();
  };

  const delayHandler = v =>
    debounce(
      value => {
        setValue(value);
      },
      2000,
      v
    );

  return (
    <div className="App">
      <p>Current value: {value}</p>
      <form>
        <input value={value} onChange={handleChange} />
      </form>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
函数去抖动（fn、ms、…args）{
让定时器；
return（）=>{
清除超时（计时器）；
计时器=设置超时（（）=>{
定时器=空；
fn.适用（本，args）；
}，ms）；
};
}
导出默认函数App（）{
const[value，setValue]=useState（“”）；
常量handleChange=e=>{
const{value}=e.target；
延迟处理程序（值）（）；
};
const delayHandler=v=>
去盎司(
值=>{
设置值（值）；
},
2000,
v
);
返回(
当前值：{value}

);
}

因此，通过将v作为参数传递给

debounce

，它将应用于

fn

函数

---

这里是完整的示例：

问题的根源在于，

debounce

返回的函数不带任何参数，因此当您将

value

传递给

delayHandler

时，它什么都不做

以下是一个工作示例：

const{useState}=React；
函数去抖动（fn，ms）{
让定时器；
返回（…参数）=>{
清除超时（计时器）；
计时器=设置超时（（）=>{
fn.适用（本，args）；
}，ms）；
};
}
函数App（）{
const[value，setValue]=useState（“”）；
常量handleChange=e=>{
const{value}=e.target；
delayHandler（值）；
};
const delayHandler=debounce（设置值，2000）；
返回(
当前值：{value}

);
}
////////////////////////////////////////
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

反应应用程序

这里是修复方法，当您调用debounce函数时，必须将值作为参数传递，否则args将不包含val。
顺便说一下，您不必自己实现，您可以使用lodash debounce
请同时发布问题中代码的重要部分。（注：我没有投反对票）哇，这正是我需要的，非常感谢！我愚蠢的错误是我忘了将参数传递给返回的函数：p但是为什么要将
let timer
移到
debounce
之外？因为我不想污染全局名称空间，所以我把它放在里面，代码仍然可以工作。很好，很高兴听到它成功了。关于污染全局名称空间的好观点。我已经移动了
let timer
回到
debounce
内部。我在调试时把它移到了外面，但忘记了在它工作后试着把它移回去。
function debounce(fn, ms, ...args) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn(...args);
    }, ms);
  };
}

const delayHandler = value =>
    debounce(
      value => {
        setValue(value);
      },
      2000,
      value
    )();