重新学防抖debounce和节流throttle，及react hook模式中防抖节流的实现方式和注意事项

最新推荐文章于 2023-11-19 20:22:18 发布
最新推荐文章于 2023-11-19 20:22:18 发布
阅读量1.4k 收藏 4
点赞数 3
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844392/article/details/108829212
版权

重学节流和防抖

防抖

概念理解

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

举例说明

坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。

在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会关闭电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。

应用场景

在开发过程中遇到的高频率触发事件

mousedown、mousemove、keyup、keydown，resize
input搜索事件，表单提交多次频繁点击

实现方式

第一版（demo1代码）
import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 1000);

  render() {
    return <button onClick={this.handleAddCount}>{this.state.count}</button>;
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;

  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func;
    }, wait);
  };
}

  • 问：这个函数用到的主要知识点是什么，这个函数可以使用吗？

    举例说明：

import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 1000);

  render() {
    return <button onClick={this.handleAddCount}>{this.state.count}</button>;
  }
}

结果：闭包，用不了

原因：this 指向问题

我们可知在setTimeout 中this 指向windows 详情可 MDN看详细说明

JavaScript 环境中内置的 setTimeout() 函数实现和下面的伪代码类似：

 function setTimeout(fn,delay) { 
 // 等待 delay 毫秒 
 fn(); // <-- 调用位置！ 
 }
第二版（修改this指向问题- demo2代码）
import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo2 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 5000);

  render() {
    return <button onClick={this.handleAddCount}>{this.state.count}</button>;
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;
  return function() {
    const this_ = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this_);
    }, wait);
  };
}
  • 问: 修改好this指向以后，这个函数可以用吗？

结果：可以使用了，但是还有问题

大家看看这个函数还有什么问题？

修改上面部分代码：（demo3）

import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo3 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce((params: number) => {
    console.log(params, 'params');
    this.setState({ count: this.state.count + params }, () => {
      console.log(this.state.count, 'count');
    });
  }, 1000);

  render() {
    return (
      <button
        onClick={() => {
          this.handleAddCount(20);
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;

  return () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this);
    }, wait);
  };
}

结果：结果为NaN，我们可以知道，函数的参数丢失了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3B9b1NVk-1629202244062)(C:\Users\wangj\AppData\Local\Temp\1628754204830.png)]

第三版（修改参数丢失问题-demo4）
import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo4 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce((params: number) => {
    this.setState({ count: this.state.count + params }, () => {
      console.log(this.state.count, 'count');
    });
  }, 1000);

  render() {
    return (
      <button
        onClick={() => {
          this.handleAddCount(20);
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;
  return (...args: any) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

问：修改号参数丢失问题后，该函数还有什么问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nl6EPABz-1629202244064)(C:\Users\wangj\AppData\Local\Temp\1628754642565.png)]

举例说明（demo5）

import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo5 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce((params: number) => {
    this.setState({ count: this.state.count + params }, () => {
      console.log(this.state.count, 'count');
    });
    return this.state.count;
  }, 1000);

  handleChange = () => {
    this.handleAddCount(1);
    console.log(this.handleAddCount(1), 'this.handleAddCount(1);');
  };

  render() {
    return (
      <button
        onClick={() => {
          this.handleChange();
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;
  return (...args: any) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

通过以上代码我们发现，当前代码无法获取到函数的返回值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WX3VkRtD-1629202244065)(C:\Users\wangj\AppData\Local\Temp\1628760189072.png)]

答：由上方可以看出，函数返回值丢失了

第四版（函数添加返回值）

因为setTimeout 为异步函数的问题和this指向的问题，导致延时器中返回的函数只能是undefined，那么我们怎么来处理这个问题呢？

方法比较多，具体大家可以参考异步函数返回值

在这我主要写两种最常见的方法：回调函数，promise

回调函数(demo6)

import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  getCount = (params: any) => {
    console.log(params, 'params');
  };

  handleAddCount = debounce(
    (params: number) => {
      this.setState({ count: this.state.count + params }, () => {
        console.log(this.state.count, 'count');
      });
      return this.state.count;
    },
    1000,
    this.getCount,
  );

  handleChange = () => {
    this.handleAddCount(1);
  };
  render() {
    return (
      <button
        onClick={() => {
          this.handleChange();
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

function debounce(func: any, wait: number, callback: any): any {
  let timer: NodeJS.Timeout;
  return (...args: any) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      callback(func.apply(this, args));
    }, wait);
  };
}

promise (demo7)

import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce((params: number) => {
    this.setState({ count: this.state.count + params }, () => {
      console.log(this.state.count, 'count');
    });
    return this.state.count;
  }, 8000);

  handleChange = () => {
    this.handleAddCount(1).then(params => {
      console.log(params, 'params');
    });
  };
  render() {
    return (
      <button
        onClick={() => {
          this.handleChange();
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

function debounce(func: any, wait: number): any {
  let timer: NodeJS.Timeout;
  return (...args) => {
    return new Promise(function(resolve) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        resolve(func.apply(this, args));
      }, wait);
    });
  };
}

问：大家觉这一版函数有什么问题？

答：不符合防抖正常情况，不能立即执行

第五版（立即执行问题-demo8)
import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  getCount = (params: any) => {
    console.log(params, 'params');
  };

  handleAddCount = debounce(
    (params: number) => {
      this.setState({ count: this.state.count + params }, () => {
        console.log(this.state.count, 'count');
      });
      return this.state.count;
    },
    5000,
    true,
    this.getCount,
  );

  render() {
    return (
      <button
        onClick={() => {
          this.handleAddCount(1);
        }}
      >
        {this.state.count}
      </button>
    );
  }
}

// 第五版
function debounce(
  func: any,
  wait: number,
  immediate: boolean,
  callback: any,
): any {
  let timer: NodeJS.Timeout | null;
  return (...args: any) => {
    if (timer) clearTimeout(timer);
    if (immediate) {
      let runNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (runNow) {
        callback(func.apply(this, args));
      }
    } else {
      timer = setTimeout(() => {
        callback(func.apply(this, args));
      }, wait);
    }
  };
}
第六版（添加防抖取消代码-demo9)
import React, { Component } from 'react';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo9 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = debounce(
    (params: number) => {
      this.setState({ count: this.state.count + params }, () => {
        console.log(this.state.count, 'count');
      });
    },
    5000,
    true,
  );
  handleCancel = () => {
    this.handleAddCount.cancel();
  };

  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.handleAddCount(1);
          }}
        >
          {this.state.count}
        </button>
        <button
          onClick={() => {
            this.handleCancel();
          }}
        >
          取消防抖
        </button>
      </div>
    );
  }
}

function debounce(
  func: any,
  wait: number,
  immediate: boolean,
  callback?: any,
): any {
  let timer: NodeJS.Timeout | null;
  const debounced = (...args: any[]) => {
    const runFunction = () => {
      return callback
        ? callback(func.apply(this, args))
        : func.apply(this, args);
    };

    if (timer) clearTimeout(timer);
    if (immediate) {
      let runNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (runNow) {
        runFunction();
      }
    } else {
      timer = setTimeout(() => {
        runFunction();
      }, wait);
    }
  };

  debounced.cancel = function() {
    timer && clearTimeout(timer);
    timer = null;
  };

  return debounced;
}
第七版（react hook 防抖实现-demo10）

我们将第六版的函数直接用到react hook 版本中

import React, { useState, useRef, useEffect } from 'react';

const demo10: React.FC<any> = () => {
  const [count, setCount] = useState<number>(0);

  const handleAddCount = UseDebounce(
    () => {
      setCount(count => count + 1);
    },
    3000,
    false,
  );

  return (
    <div>
      <button onClick={handleAddCount}>count|{count}</button>
    </div>
  );
};
export default demo10;

// 普通函数
function UseDebounce(
  func: any,
  wait: number,
  immediate: boolean,
  callback?: any,
): any {
  let timer: NodeJS.Timeout | null;
  const debounced = (...args: any[]) => {
    const runFunction = () => {
      return callback
        ? callback(func.apply(this, args))
        : func.apply(this, args);
    };

    if (timer) clearTimeout(timer);
    if (immediate) {
      let runNow = !timer;
      timer = setTimeout(() => {
        timer = null;
      }, wait);
      if (runNow) {
        runFunction();
      }
    } else {
      timer = setTimeout(() => {
        runFunction();
      }, wait);
    }
  };

  debounced.cancel = function() {
    timer && clearTimeout(timer);
    timer = null;
  };

  return debounced;
}

发现函数失效了，

注意点：在上面例子中，debounce的第三个函数为false 时，闭包的原因导致，导致定时器timer 未被清理， 从而导致防抖起作用

失效原因分析：

在执行setCount 时，count 改变导致函数重建，延时器timer 被清除，在这我们只需要保证timer不被清除就可以了，我们使用useRef来缓存变量timer

function UseDebounce(
  func: any,
  wait: number,
  immediate: boolean,
  callback?: any,
): any {
  let timer = useRef<NodeJS.Timeout | null>();
  const debounced = (...args: any[]) => {
    console.log('渲染');

    const runFunction = function() {
      console.log('ddd');

      return callback
        ? callback(func.apply(this, args))
        : func.apply(this, args);
    };

    if (timer.current) clearTimeout(timer.current);

    if (immediate) {
      let runNow = !timer.current;
      timer.current = setTimeout(() => {
        timer.current = null;
      }, wait);
      if (runNow) {
        runFunction();
      }
    } else {
      timer.current = setTimeout(() => {
        runFunction();
      }, wait);
    }
  };

  debounced.cancel = function() {
    timer.current && clearTimeout(timer.current);
    timer.current = null;
  };

  return debounced;
}
第八版（react hook 优化-demo11）

在demo10中存在UseDebounce 多次生成的情况

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdYDGpA1-1629202244067)(C:\Users\wangj\AppData\Local\Temp\1629103502231.png)]

我们怎么解决这种情况呢？

  1. 借助 useCallback 函数的第二个参数，做依赖更新。

  2. 借助 useRef 永久存贮，借助 useEffect 更新永久存贮。

    import React, { useState, useCallback, useEffect, useRef } from 'react';

const demo11: React.FC<any> = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = useCallback(data => {
    console.log(data, 'data');
  }, []);

  const func = React.useCallback(() => {
    setCount(count => count + 1);
    return 2;
  }, []);

  const handleAddCount = UseDebounce(func, 3000, true, handleClick);

  return (
    <div>
      <button onClick={handleAddCount}>count|{count}</button>
    </div>
  );
};
export default demo11;

function UseDebounce(
  func: any,
  wait: number,
  immediate: boolean,
  callback?: any,
): any {
  let timer = useRef<NodeJS.Timeout | null>();
  const fnRef = useRef<any>(func);

  useEffect(() => {
    fnRef.current = func;
  }, [func]);

  const timerCancel = function() {
    if (timer.current) clearTimeout(timer.current);
  };
  console.log('渲染');

  function debounced(...args: any[]) {
    const runFunction = () => {
      return callback
        ? callback(fnRef.current.apply(fnRef.current, args))
        : fnRef.current.apply(fnRef.current, args);
    };

    timerCancel();
    if (immediate) {
      let runNow = !timer.current;
      timer.current = setTimeout(() => {
        timer.current = null;
      }, wait);
      if (runNow) {
        runFunction();
      }
    } else {
      timer.current = setTimeout(() => {
        runFunction();
      }, wait);
    }
  }

  debounced.cancel = function() {
    timerCancel();
    timer.current = null;
  };

  return useCallback(debounced, [wait, immediate, timerCancel, func]);
}

节流

概念理解

节流就是指连续触发事件在 n 秒中只执行一次函数。节流会稀释函数的执行频率

举例说明

坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过。

分析可知，“函数节流”的要点在于，在 一定时间 之内，限制 一个动作 只 执行一次 。

应用场景

  1. scroll 事件，每隔一秒计算一次位置信息等
  2. 浏览器播放事件，每个一秒计算一次进度信息等
  3. input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

实现方式

第一版（时间戳版-demo1）
import React, { Component } from 'react';
import '../index.less';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = throttle(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 3000);

  render() {
    return (
      <div className="box" onMouseOver={this.handleAddCount}>
        {this.state.count}
      </div>
    );
  }
}

function throttle(func: any, wait: number) {
  let previous: number = 0;
  return (...args: any) => {
    let now = new Date().getTime();
    if (now - previous > wait) {
      func.apply(this, args);
      previous = now;
    }
  };
}
第二版（定时器版-demo2）
import React, { Component } from 'react';
import '../index.less';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = throttle(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 3000);

  render() {
    return (
      <div className="box" onMouseOver={this.handleAddCount}>
        {this.state.count}
      </div>
    );
  }
}

function throttle(func: any, wait: number) {
  let timer: NodeJS.Timeout | null = null;
  return (...args: any) => {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        func.apply(this, args);
      }, wait);
    }
  };
}

现在我们分析一下，上面两版

第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行
第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

所以我们将这两版总结一下，实现一版，鼠标移入能立即执行，但是停止触发的时候还能再次执行一次，代码如下：

第三版（二合一版-demo3）
import React, { Component } from 'react';
import '../index.less';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleAddCount = throttle(() => {
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count, 'count');
    });
  }, 3000);

  render() {
    return (
      <div className="box" onMouseOver={this.handleAddCount}>
        {this.state.count}
      </div>
    );
  }
}

function throttle(func: any, wait: number) {
  var previous = 0;
  let timer: NodeJS.Timeout | null;

  const runFunction = function(...args: any[]) {
    previous = new Date().getTime();
    timer = null;
    func.apply(this, args);
  };

  const throttled = (...args: any[]) => {
    var now = new Date().getTime();
    var remaining = wait - (now - previous);
    if (remaining <= 0 || remaining > wait) {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
      previous = now;
      func.apply(this, args);
    } else if (!timer) {
      timer = setTimeout(runFunction, remaining);
    }
  };
  return throttled;
}

上面的代码还有许多局限，比如说，我想要实现，鼠标移入不执行，但是停止触发的时候再执行一次的效果，或者鼠标移入立即执行，但是停止触发的时候不再执行的效果。对于这种情况我们应该如何去做呢？

那我们设置个 options 作为第三个参数，然后根据传的值判断到底哪种效果，我们约定:

leading：false 表示禁用第一次执行
trailing: false 表示禁用停止触发的回调

同时在加上函数的回调函数，和节流取消

我们来优化一下代码：

第四版（demo4代码）
import React, { Component } from 'react';
import '../index.less';

type TypeProps = any;
type TypeState = {
  count: number;
};

export default class demo1 extends Component<TypeProps, TypeState> {
  constructor(props: Readonly<TypeProps>) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  getCount = (data: any) => {
    console.log(data, 'data');
  };

  handleAddCount = throttle(
    () => {
      this.setState({ count: this.state.count + 1 }, () => {
        console.log(this.state.count, 'count');
      });
      return 2;
    },
    10000,
    {
      trailing: false,
    },
    this.getCount,
  );

  handleCancel = () => {
    this.handleAddCount.cancel();
  };

  render() {
    return (
      <div>
        <div className="box" onMouseOver={this.handleAddCount}>
          {this.state.count}
        </div>
        <button
          onClick={() => {
            this.handleCancel();
          }}
        >
          取消节流
        </button>
      </div>
    );
  }
}

function throttle(func: any, wait: number, options?: any, callback?: any) {
  let previous: number = 0;
  let timer: NodeJS.Timeout | null = null;
  if (!options) {
    options = {};
  }

  const timerCancel = function() {
    if (timer) clearTimeout(timer);
  };

  const runFunction = (...args: any) => {
    previous = options.leading === false ? 0 : new Date().getTime();
    timer = null;
    callback ? callback(func.apply(this, args)) : func.apply(this, args);
    if (!timer) args = null;
  };

  const throttled = (...args: any) => {
    let now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    let remaining = wait - (now - previous);
    if (remaining <= 0 || remaining > wait) {
      timerCancel();
      previous = now;
      callback ? callback(func.apply(this, args)) : func.apply(this, args);
      if (!timer) args = null;
    } else if (!timer && options.trailing !== false) {
      timer = setTimeout(runFunction, remaining);
    }
  };

  throttled.cancel = function() {
    timerCancel();
    timer = null;
    previous = 0;
  };

  return throttled;
}

我们要注意有这样一个问题：

那就是 leading：false 和 trailing: false 不能同时设置。

如果同时设置的话，比如当你将鼠标移出的时候，因为 trailing 设置为 false，停止触发的时候不会设置定时器，所以只要再过了设置的时间，再移入的话，就会立刻执行，就违反了 leading: false，bug 就出来了，所以，这个 throttle 只有三种用法：

container.onmousemove = throttle(getUserAction, 1000);
container.onmousemove = throttle(getUserAction, 1000, {
    leading: false
});
container.onmousemove = throttle(getUserAction, 1000, {
    trailing: false
});
第五版（react hook 节流实现-demo5）
import React, { useState, useRef, useEffect, useCallback } from 'react';

const demo5: React.FC<any> = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = useCallback(data => {
    console.log(data, 'data');
  }, []);

  const handleAddCount = UseThrottle(
    () => {
      setCount(count => count + 1);
      return 2;
    },
    3000,
    true,
    handleClick,
  );

  const handleCancel = useCallback(() => {
    handleAddCount.cancel();
  }, []);

  return (
    <div>
      <div className="box" onMouseOver={handleAddCount}>
        {count}
      </div>
      <button onClick={handleCancel}>取消节流</button>
    </div>
  );
};
export default demo5;

function UseThrottle(func: any, wait: number, options?: any, callback?: any) {
  const previous = useRef<number>(0);
  const timer = useRef<NodeJS.Timeout | null>();
  const fnRef = useRef<any>(func);
  if (!options) {
    options = {};
  }

  useEffect(() => {
    fnRef.current = func;
  }, []);

  const runFunction = (...args: any) => {
    previous.current = options.leading === false ? 0 : new Date().getTime();
    timer.current = null;
    callback
      ? callback(func.apply(fnRef.current, args))
      : func.apply(fnRef.current, args);
    if (!timer) args = null;
  };

  const timerCancel = function() {
    if (timer.current) clearTimeout(timer.current);
  };

  const throttled = (...args: any) => {
    let now = new Date().getTime();
    if (!previous.current && options.leading === false) previous.current = now;
    let remaining = wait - (now - previous.current);
    if (remaining <= 0 || remaining > wait) {
      if (timer.current) {
        clearTimeout(timer.current);
        timer.current = null;
      }
      previous.current = now;
      callback
        ? callback(func.apply(fnRef.current, args))
        : func.apply(fnRef.current, args);
      if (!timer.current) args = null;
    } else if (!timer.current && options.trailing !== false) {
      timer.current = setTimeout(runFunction, remaining);
    }
  };

  throttled.cancel = function() {
    timerCancel();
    timer.current = null;
    previous.current = 0;
  };

  return useCallback(throttled, [wait, options, timerCancel, func]);
}

注意点

当我在实现react中触发input 组件中的onChange 事件时去发送一个异步请求，但是发现一直获取不到value 值，代码如下

  const onSearchChange = (e) => {
    e.persist()
    e.preventDefault()
    e.stopPropagation()
    setSearchValue(e.currentTarget.value)
    
    useDebounce(() => {
      setFilterValue(e.currentTarget.value)
    }, 500)
  }

就是setFilterValue 一直获取不到值，最后经过调查发现了原由，
首先,在 onSearchChange 中，事件触发，就能获取到 event 对象，其中主要就是 event.target 就是当前触发事件的 dom 对象，由于 useDebounce延迟执行，导致了 onSearchChange 函数已经执行完了，进入了 react-dom 中相关一系列操作(进行了一系列复杂的操作)，下面给出最关键的 executeDispatchesAndRelease，executeDispatchesAndRelease 方法释放 event.target 的值

        /**
 * Dispatches an event and releases it back into the pool, unless persistent.
 *
 * @param {?object} event Synthetic event to be dispatched.
 * @private
 */
        var executeDispatchesAndRelease = function(event) {
            if (event) {
                executeDispatchesInOrder(event);
                if (!event.isPersistent()) {
                    event.constructor.release(event);
                }
            }
        };

由于 event 在 useDebounce中作为了参数，内存中没有清除，执行上面的方法 event.target = null; event 为引用类型，一处改变，所有用到的地方都会改变。导致了 useDebounce中 event 也发生了变化。

解决办法:

  const onSearchChange = (e) => {
    e.persist()
    e.preventDefault()
    e.stopPropagation()
    setSearchValue(e.currentTarget.value)
    handleSearchChange(e.currentTarget.value)
  }

  const handleSearchChange = useDebounce((value) => {
    setFilterValue(value)
  }, 500)

参考文档：
JavaScript专题之跟着 underscore 学节流
React hooks 怎样做防抖？

weixin_43844392
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript函数的节流[throttle]与防抖[debounce]
10-19
主要介绍了javascript函数的节流[throttle]与防抖[debounce ]，详细的介绍了节流与防抖的原理和示例，具有一定的参考价值，有兴趣的可以了解一下
防抖和节流Throttle and debounce.html
05-17
防抖和节流
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
10-16
今天小编就为大家分享一篇在vue中使用防抖和节流,防止重复点击或重复上拉加载实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Javascript节流函数throttle和防抖函数debounce
01-18
问题的引出 　　在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器崩溃。 在这样的情况下，我们实际上的需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。 1. resize事件 2. mousemove事件 3. touchmove事件 4.scroll事件 throttle 与 debounce 在现在很多的javascript框架中都提供了这两个函数。例如 jquery中有throttle和debounce插件， underscore.j
js中的节流和防抖的区别及应用场景
01-08
函数节流(throttle)和防抖(debounce)：是一种性能优化手段 一、函数节流 类比生活中的例子。高频率触发某个事件就像一个大开的水龙头，水流源源不断大量流出，就像代码在不断执行。这是对资源的一种浪费。我们要通过节流，把水龙头拧紧一点，让它流水的频率降低，但是每一段时间都能滴下一滴水，从而节省资源。 节流应用场景： 用户滚动浏览器滚动条的时候，就会调用后台的接口来更新页面上的某些内容。如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用，损耗浏览器引擎。使用节流函数限制接口调用频率，优化性能。 节流函数 //节流函数，只有大于设定的周期才会执行第二次 fu
一文搞懂如何在 React 中使用 防抖（Debounce）和 节流（Throttle）
小陈的博客
02-27 5857
在自定义 hook 中，使用了另外一个 state 进行保存和更新状态，只有在间隔时间到了才会更新，然后将这个新的 state 返回出去，在页面上可以这样使用，直接依赖 返回出来的状态，这样每次这个状态改变时，就是间隔时间到了的时候，就可以进行异步请求了。而节流函数则是每隔一段时间就执行一次请求。在前端开发中，防抖和节流函数几乎是必备的技能，它们的实现原理都离不开 js 闭包的特性，而在 React 中通过使用自定义的 hook，可以达到一样的效果，有些场景下可能还更方便些，但总的来说本质还是那样。
【React】- 使用节流
HVENLY的博客
11-12 953
本篇文章记录了在React中使用节流的方式
防抖节流以及React Hook中的防抖节流
lovezhuer1的博客
03-22 4350
React Hook防抖前言一、pandas是什么？二、使用步骤1.引入库2.读入数据使用Umi Hooks防抖节流 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： impor
React 防抖与节流用法
TianXuab的博客
09-08 1202
当用户频繁滚动页面或调整窗口大小时，我们可以设置一个固定的时间间隔，只在该时间间隔内执行一次回调函数。在React中使用防抖的常见场景是处理输入框的搜索功能。当用户输入时，我们可以设置一个延迟时间，只有在用户停止输入一段时间后才触发搜索请求。请注意，以上示例代码中使用了Lodash库来提供防抖和节流的函数。函数会被调用，但是由于节流的作用，只有在200毫秒内第一次滚动事件触发时，才会真正执行滚动逻辑。但是，由于防抖的作用，只有在用户停止输入500毫秒后，才会执行真正的搜索逻辑。在上面的代码中，我们使用。
react 防抖和节流
weixin_43954835的博客
01-28 1476
节流: 一段时间内只运行一次，若在这段时间内重复触发，只有第一次生效。防抖: 一段时间后在执行该事件，若在这段时间内被重复触发，则重新计时。引入：import _ from 'lodash'节流一般用在按钮上，防抖一般用在搜索上。第三方函数工具库：lodash。安装：npm i lodash。react封装好的防抖和节流。如有问题欢迎讨论指正~
use-debounced：已反跳的React Hooks
02-08
@ susisu / use-debounced 防弹钩 npm i @susisu/use-debounced # or yarn add @susisu/use-debounced 用法 useDebouncedState useDebouncedState类似于标准的useState挂钩，但是状态更新会被去抖动。 import React from "react" ; import { useDebouncedState } from "@susisu/use-debounced" ; const MyComponent : React . FC = ( ) => { const [ value , setValue , isWaiting ] = useDebouncedState ( { init : "" , wait : 1000 , } ) ;
通过实例学习React中事件节流防抖
10-16
主要介绍了通过实例学习React中事件节流防抖，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下
React 自定义hook 之 防抖和节流
最新发布
qq_37011724的博客
11-19 650
防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。节流: 当事件触发后，在一定时间内会忽略新的事件执行。
React 性能优化指南之性能分析与16种优化方法大总结
React_Community的博客
04-21 5703
本文分为两个部分1 如何分析 React性能1.1 性能分析指标有哪些1.2 性能分析的两个阶段1.3 通过工具查看指标和度量2 16个React 性能优化方法2.1 前端通用优化2.2 减少不必要的组件更新2.3 提交阶段优化1 性能 分析进行任何性能优化的首先你要知道有哪些衡量的指标？其次找出存在的问题？然后才能针对性地进行优化。1.1 性能分析指标有哪些定性：加载性...
有关React的防抖与节流操作
weixin_45868552的博客
03-28 568
函数的节流与防抖，很多人可能会将它们搞混，这里说下它们的区别，以及在React项目中的应用 一、函数节流 1、概念：自己规定一个时间，在这个规定时间内，某事件被触发多次，但是这个事件只执行一次 2、原理：闭包，为何都要用闭包呢？闭包主要有两个功能，一是可以使外部函数读取到内部函数的变量，二是，让这些变量的值始终保存在内存中。我们这里主要使用的是第二个作用。 （1）时间戳实现：用闭包将点击时的时间戳存储起来（为啥要用闭包存储，因为闭包可以将时间戳始终保存到变量中），然后判断当前时间与存储的时间戳的差值是否大于
React hooks中节流的处理
qq_37473645的博客
11-17 3492
背景：采用React hooks来进行开发，确认自己写的节流函数没有问题后，在获取取手机验证码的操作中，快速多次点击按钮“获取手机验证码”，仍然造成多次发送请求。 如图，快速连续点击获取验证码按钮，发送了三个getcode的请求 解决此问题一般采用节流解决 节流 节流：在规定时间内，函数只执行一次。例如，2秒内点击同一按钮多次，但按钮所绑定的事件只执行一次。2秒后，按钮又被点击的话，函数在点击后的2秒内又只执行一次，不点击就不执行。 原理：闭包。节流一般有两种实现方式，时间戳和定时器。 用时
react简单实现防抖和节流教程方法
我的博客，不一样的自我表达
04-12 692
防止抖动的意思，也就是不抖动时才进行相应的处理。比如一根拉直的弹簧，我们拨动一下它就会抖动，过一段时间后弹簧会恢复到平静的状态（从拨动弹簧使其抖动到恢复平静的时长就是代码例子的ms值）。在这个过程中，拨动弹簧的这一行为假设为事件被触发（代码中的input事件被触发），当弹簧恢复平静时我们再执行事件处理函数（代码中的sayHi函数）。基于以上假设，当我们在弹簧还没恢复到平静状态时，又不断地拨动它（清除了原来的setTimeout，并重新开始计时），因为弹簧还没恢复到平静，那么事件处理函数就一直不会被执行。
函数防抖(debounce)和函数节流(throttle) （js,vue,react端使用）上(防抖的3种使用方法)
weixin_40139353的博客
03-24 241
【代码】函数防抖(debounce)和函数节流(throttle) （js,vue,react端使用）上(防抖的3端实现方式)
关于debounce和throttle的区别及应用场景
weixin_30552811的博客
05-13 137
电梯超时 想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应。假设电梯有两种运行策略 `throttle` 和 `debounce` ，超时设定为15秒，不考虑容量限制。 throttle 策略的电梯。保证如果电梯第一个人进来后，15秒后准时运送一次，不等待。如果没有人，则待机。 debounce 策略的电梯。如果电梯里有人进来，等待15秒。如果又人进来，15秒等待重...
js防抖和节流 区别及实现方式
04-29
JS防抖和节流都是一些常见的优化页面性能的技术，它们可以避免过多的重复操作和减少事件频率，提高页面交互体验。防抖和节流的实现方式都是基于定时器来实现的。 防抖（Debounce）：是指在事件触发后延迟一段时间再进行处理，如果在这段时间内又触发了该事件，则重新计时。最常见的应用场景是当用户在输入框中输入内容时，等待用户输入完成一段时间后再查询数据。防抖的实现方式是在触发事件后设置定时器，如果在定时器时间结束之前又触发了该事件，则清除原来的定时器，重新设置一段时间的定时器。 节流（Throttle）：是指在一定时间内只对事件进行一次处理。最常见的应用场景是在页面滚动时，只触发少量的事件。节流的实现方式是在事件处理函数中判断当前时间与上一次处理时间的时间间隔是否超过设置的阈值，如果超过则执行事件处理函数并更新时间，否则不执行处理函数。 总的来说，防抖和节流的核心都是限制事件的触发频率，但是它们的实现方式和应用场景不同。防抖更适用于需要等待用户输入等操作，而节流更适用于一些高频率事件，如页面滚动。在实际开发中，根据具体场景选择防抖和节流的方式可以有效地提高页面交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值