根据鼠标的位置延迟更改宽度

在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。一些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函数。

相关内容

最新更新

热门标签：