清理componentWillUnmount中的.throttle()d回调

Question

我有以下设置：

componentDidMount() {
  Dispatcher.on('app:update', _.throttle(this.postLoad, 1000));
}

componentWillUnmount() {
  Dispatcher.removeListener('app:update', this.postLoad)
}

但是，我在控制台中收到了关于尝试在未挂载的组件上调用setState的错误(发生在postLoad内部)。在componentWillUnmount中取消限制功能的最佳选择是什么？

.throttle来自洛达什

Answer 1

您很可能会看到在超时的尾部调用您的节流函数。为了说明这一点，让我们看一下throttle()的默认行为

var throttled = _.throttle(function() { 
  console.log('ran'); 
}, 1000);

for (var i = 0; i < 3; i ++) {
  throttled();
}

// → ran
// → ran

这很奇怪，有两个电话打给了throttled()。循环实际上进行了三次调用，但预期是由于它被限制为1秒，所以应该只有一次调用。

默认情况下，throttle()的尾随选项设置为true。这意味着在超时过后，将再次调用节流函数-假设它是在超时开始之后结束之前调用的。

在您的案例中，简单的解决方案可能是关闭此选项，如下所示：

var throttled = _.throttle(function() { 
  console.log('ran'); 
}, 1000, { trailing: false });