去抖不遵守超时

Question

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

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

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

还有示例代码，它是基本的 React'js class。

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>;
    );
}});

问题是，我在该按钮中进行的每次点击，去抖功能都会运行请求。有什么问题？

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>;
    );
}});

去抖不遵守超时

Debounce doesn't respect the timeout

javascript

debouncing

reactjs