关于js防抖与节流

本人纯属个人见解,如有不对的地方请大佬们指出

关于节流和防抖 我也是不久前才注意到的,主要是用来终止一些可持续加载的代码,比如scroll,keyup,keydown这类操作,之前自己做项目的时候已经注意到这种问题,迟迟没有去深究原因,现在我要把自己了解的内容记录下来

**

节流:

**
节流就是指在操作过程中,隔一段时间 就会加载一次代码,比如你设定1秒后执行一次代码,当你操作时,无论怎么样,都会每隔一秒执行一次。

	var flag = true;
	window.onscroll = function(){
	var timer = null;
	if(!flag){
		return
	}
	flag = false;
	timer = setTimeout(function(){
		console.log('sssss');
		flag = true;
	},1000)
}

上述代码中,首先定义一个flag用来判断当前状态,当页面滚动时,注册一个定时器,判断flag如果是false,直接return出函数,如果是true,给定时器赋值,1秒后执行操作,flag赋值为true,在这个过程中,不管页面如何滚动,函数都会在 一秒后执行,这就是函数节流。

防抖

防抖就是指在操作过程中,只有在你停止操作后才会执行一次函数。有且只有一次,多数用到输入命令时。

	var fangdou = document.getElementById('fangdou');
	function doudou(){
		var timer = null;
		return function(){
			if(timer){
				clearTimeout(timer);
			}
			timer = setTimeout(function(){
				console.log('ssss')
			},1000)
		}
	}
	fangdou.onkeyup = doudou();

上述代码中,首先也是先注册一个定时器,然后在函数防抖中定义一个闭包,判断timer计时器为空的时候,自动清除定时器,然后再给定时器赋值进行自己的操作,当keyup的时候,timer每次都会为null,就会自动清除计时器,函数重新计算执行时间,知道最后一次操作结束 一秒后执行对应操作。

本人描述能力不强,如有不对的地方,请大家勿喷,多多指正,感谢!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值