Question

我正在尝试设置一个debounce函数来处理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>;
    );
}});

去抖不尊重超时

1 个答案: