前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >防抖和节流函数

防抖和节流函数

原创
作者头像
用户10562852
发布2023-06-04 22:15:02
2160
发布2023-06-04 22:15:02
举报
文章被收录于专栏:前端不难

防抖

当很频繁地(在设置的事件内)触发某一个回调的时候,只执行最后一次触发的回调。

应用场景:用户持续点击某一按钮(抢购某一商品)

代码语言:javascript
复制
// 防抖函数接收一个函数和延时时间
function debounce(fun, delay) {
	// 1.设置一个定时器变量
	var timer = null;
	return function() {
        // 清除上一次定义的定时器,保证只执行最后一次定时器里面的操作
		clearTimeout(timer);
		timer = setTimeout(() => {
			fun();
		}, delay)
	}
}
function fn() {
	console.log('sss')
}
window.addEventListener('scroll', debounce(fn, 2000))

节流

如果持续触发事件,则每隔一段时间才会触发一次。

应用场景:发送ajax请求,搜索功能获取提示信息,或者用于鼠标的跟随动画实现,scrollresize, touchmove, mousemove等极易持续性促发事件的相关动画问题,降低频率

实现方式一:使用 setTimeout

代码语言:javascript
复制
function throttle(fun, delay) {
    // 定时器变量
	var timer = null;
	return function() {
        // 判断是否已经触发过一次回调了,触发过一次则等待上一次执行完
		if(!timer) {
			timer = setTimeout(() => {
				fun();
                // 执行完后就把定时器变量设为空,方便再执行下一次
				timer = null;
			}, delay)
		}
	}
}
function fn() {
	console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))

实现方式二:使用 时间戳

代码语言:javascript
复制
function throttle(func, delay) {
	// 设置一个变脸用于接收之前的时间戳
	var preTime = 0;
	return function() {
		// 获取当前的时间戳
		var now = Date.now()
		// 判断是否在delay时间间隔内,是就不执行,不是就执行
		if(now - preTime >= delay){
			func()
			// 将当前时间赋值给preTime 作为上一次执行的时间,以此来判断上一次和下一次执行的时间间隔
			preTime = now
		}
	}
}
function fn() {
	console.log('zhiing')
}
window.addEventListener('scroll', throttle(fn, 2000))

这两种实现的方式的不同点是:

使用setTimeout一开始执行就会有延迟,而使用时间戳的方式当第一次触发回调会立即执行

函数的防抖与节流都是优化性能的一种方式,目的都是,降低回调函数的执行频率,节省计算资源。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 防抖
  • 节流
    • 实现方式一:使用 setTimeout
      • 实现方式二:使用 时间戳
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档