在vue项目使用防抖、节流

最新推荐文章于 2025-05-03 22:08:14 发布

mrjimin

最新推荐文章于 2025-05-03 22:08:14 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue js javascript vue.js

本文链接：https://blog.csdn.net/mrjimin/article/details/116985965

下面这是我的项目目录结构，在utils文件夹下面创建common.js，这个js文件我用来存放一些常用的函数、方法等等，暂时先添加了防抖、节流函数。
当然这个也不一定就要放在utils文件夹下面，引入的时候，引入对应的文件路径就行
在这里插入图片描述
common.js


/**
* @function 防抖函数，规定时间内点击多次，只执行最后一次
* @method debounce(fn,delay);
* @param {function} fn       需要执行的函数
* @param {number} [delay=300]     等待时间（毫秒）,默认等待时间为300毫秒,为0的话就不需要防抖函数了
* @example 
  const func = () => {
      console.log("1234567");
  };
  const dianji = debounce(func, 500);
*/

const debounce = (fn, delay = 300) => {
   
   
  let timer = null; // 创建一个标记用来存放定时器的返回值
  return function () {
   
   
    // 再次执行的时候把前一个 setTimeout clear 清空掉
    clearTimeout(timer);
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
    timer = setTimeout(() => {
   
   
      fn.apply(this,