Debounce 不考虑超时

Question

我正在尝试设置一个去抖函数来处理 HTTP 请求函数。代码和下面的很相似，基本上我只是改了函数命名而已。

首先，我正在使用这个去抖动功能。

function debounced(fn, delay) {
let timerId;
return function (...args) {
    if (timerId) {
        clearTimeout(timerId);
    }
    timerId = setTimeout(() => {
        fn(...args);
        timerId = null;
    }, delay);
}}

还有一个基本 React'js 类的示例代码。

var Example = React.createClass({
getInitialState: function () {
    return ({
        counter: 0
    });
},
clickEvt: function () {
    console.log("hey!!");
    this.setState({counter: this.state.counter + 1});
    return debounced(request(this.props.counter), 3000);
},

render: function () {
    return (
        <button onClick={this.clickEvt}>hit me</button>;
    );
}});

问题是，debounced 函数在我每次点击该按钮时都会运行请求。有什么问题？

Answer 1

您每次单击时都会重新创建一个去抖动的函数，因此这将不起作用。您需要创建一次并使用它。

您还直接调用您的函数。 这应该有效：

var Example = React.createClass({
getInitialState: function () {
    return ({
        counter: 0
    });
},
debouncedRequest: debounce(function() {
   request(this.props.counter);
}, 3000),
clickEvt: function () {
    console.log("hey!!");
    this.setState({counter: this.state.counter + 1});
    return this.debouncedRequest();
},

render: function () {
    return (
        <button onClick={this.clickEvt}>hit me</button>;
    );
}});