节流，防抖的使用

磨牙石

已于 2023-04-12 11:46:17 修改

阅读量110

点赞数

文章标签：前端

于 2023-04-10 10:37:20 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44911525/article/details/130054450

版权

文章介绍了JavaScript中两种优化函数执行的技巧：节流和防抖。节流函数在设定的时间间隔内只执行一次，常用于滚动事件处理；防抖函数则是连续触发后，只执行最后一次，适合用于如输入验证等场景。示例代码展示了如何创建和使用这两个功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 节流：在n秒内只会执行一次
 在script  写一个节流，在需要的方法里面调用这个函数就可以使用了，delay可以设置默认时间，可以在调用的函数下面设置时间。
 const throttle=(func, delay=500) => {
	// 缓存一个定时器
	let timer = null
	// 这里返回的函数是每次用户实际调用的节流函数 
	return function(...args) {
		if (!timer) { //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
			timer = setTimeout(() => { //关
				func.apply(this, arguments)
				timer = null; //开
			}, delay)
		}
	}
}

在这里插入图片描述

// 防抖 ： 多次连续点击，等待完时间间隔之后执行最后一次点击的值。
  const Debounce = (fn, t) => {
    let delay = t || 500;
    let timer;
    return function () {
      let args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(() => {
        timer = null;
        fn.apply(this, args);
      }, delay);
    };
  }，

在方法中使用和节流一样。