根据鼠标的位置延迟更改宽度[重复]答案

【问题标题】：Change width according to position of mouse with delay [duplicate]根据鼠标的位置延迟更改宽度[重复]
【发布时间】：2018-01-02 14:37:26
【问题描述】：

在 reactJS 中，我想根据鼠标位置调整 div 的大小。我不想为每个事件调用渲染方法。如何添加一种延迟，以防止渲染 aech 鼠标事件？

反应JS

 ...
 resizeChild(e) {

      //add delay

      this.setState({
        width: e.positionX,
      }
 ...


<body onMouseMove={this.resizeChild}>
  <div style={{width: this.state.width}}>
   Resize me
  </div>
</body>

【问题讨论】：

我认为 debounce 在这种情况下更合适。顺便说一句，您可以查看this 演示示例，该示例准确地展示了如何通过鼠标移动使用去抖动来防止油门

标签： reactjs

【解决方案1】：

您可以为此使用debounce。一些 javascript 库提供此功能，但您可以自己编写。

以下内容来自lodash：

返回一个函数，只要它继续被调用，不会被触发。该函数将在停止后调用被调用 N 毫秒。如果通过immediate，则触发函数位于前缘，而不是尾随。

和代码：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

这意味着如果你将 lodash 导入为_，你可以这样做：

<body onMouseMove={_.debounce(this.resizeChild, 500)}>

这只会触发resizeChild函数每秒最多两次。

【讨论】：

什么是 args = 参数，它永远不会被设置。 debounce(this.resizeChild, 500) 立即调用 resizeChild。我怎样才能让它发挥作用？
@vuvu，更大的代码 sn-p 只是从 lodash 获取的源代码，以防你想看看它是如何工作的。如果您正在实现该库，只需执行最后一个 sn-p。
我尝试了最后一个 sn-p 并 debounce 说：Uncaught TypeError: Expected a function.
@vuvu 你确定你复制了代码吗？包括下划线和点？你有没有做import _ from lodash; 并从 npm 安装了 lodash？