创建一个去抖函数，在搜索时延迟调用 func答案

【问题标题】：create a debounced function that delays invoking func when searching创建一个去抖函数，在搜索时延迟调用 func
【发布时间】：2019-08-02 16:49:09
【问题描述】：

我创建了一个延迟调用 func getTodo 的去抖动函数。它向输入写入字母，但没有任何反应。在网络选项卡中，也是零请求。没有去抖动，搜索工作。

import _, {debounce} from 'lodash';

class App extends Component {
  constructor (props) {
    super(props);
    this.state = {
      todos: [],
    }
  }

  search = (query) => {
    debounce(() =>  this.getTodo(query), 1000)
  }

  getTodo = (query) => {
    axios({
       url: `/api/v1/todos/{query}`,
       method: "GET"
    })
    .then(res => {  
        this.setState({
            todos: res.data
        });
    })
    .catch(error => {
      console.log(error);
    }) 

  render () {

    return (
        <input onChange={this.search} />    
    )
  }
}

【问题讨论】：

标签： javascript reactjs lodash

【解决方案1】：

Debounce 是一个高阶函数，它采用另一个函数来包装它。要使 debounce 工作，您需要不断调用 debounce 返回的新函数（debounced 函数）。每当调用 debounced 函数时，它都会延迟调用包装函数 wait 时间。如果在wait 时间窗口内再次调用它，则包装函数的执行将再次延迟相同的wait 时间，依此类推。如果wait 时间结束，并且在此期间没有再次调用该函数，则调用包装函数。

你正在创建去抖函数，但你没有调用它，这就是为什么什么都没有发生。 @iagowp 的答案一直在重新创建该函数，这意味着它的行为类似于 setTimeout，延迟为 1000 毫秒，而不是作为去抖函数。

要正确使用 debounce，请将 getTodo 函数用 debounce 包装起来。这将返回一个新的包装函数，您将其作为 onChange 处理程序调用：

getTodo = debounce((query) => {
  axios({
      url: `/api/v1/todos/{query}`,
      method: "GET"
    })
    .then(res => {
      this.setState({
        todos: res.data
      });
    })
    .catch(error => {
      console.log(error);
    })
}, 1000);

如果您想将处理程序与服务器调用分开，您可以封装search 方法：

search = debounce((query) => this.getTodo(query), 1000);

【讨论】：

我必须使用getTodo = debounce((query) => {。我该怎么办：search = (query) => { debounce(() => this.getTodo(query), 1000)() }?
你根本不需要搜索功能。我已经修正了我的答案，因为我忘了添加等待时间。
如果要使用搜索功能，可以用debounce包装，可以改成：search = debounce((query) => this.getTodo(query), 1000)}
所以我可以从答案或评论中选择这个解决方案？
是的。我也用评论代码更新了答案。

【解决方案2】：

根据lodash documentation：

创建一个去抖函数，延迟调用 func 直到之后等待自上次去抖动后经过的毫秒数函数被调用。

您没有调用创建的函数，有两种解决方案：

search = (query) => {
  debounce(() =>  this.getTodo(query), 1000)()
}

或

search = (query) => {
  let debounced = debounce(() =>  this.getTodo(query), 1000)
  debounced();
}

对于你使用它的方式，为什么不只是一个setTimeout？

【讨论】：