防抖 和 节流 都是为了节省资源,防止js多次重复执行导致卡顿等问题而产生的;
实现上@H_502_5@
防抖
触发事件后,设置一个定时器settimeout,在还没执行的时间内,如果再次触发该事件,就重新计时。
节流
触发事件后,设置一个变量为 false,执行结束时设置变量为 true;再次触发事件,判断如果变量还是false,就不执行,变量为true 才执行下一次。
表现上@H_502_5@
防抖
规定时间内再次触发事件,由于每次都会清除上一次的倒计时,所以它实际上只会真正执行最后一次处理; 对! 强调执行一次;所以很适合的场景有: input监听ajax候选词,防止点击多次提交;
节流
规定时间内再次触发事件,由于是监听变量的方式,因此当变量重新被设置为true时,js又会执行;强调的是排队执行,可以执行多次;适合的场景有:滚动事件监听,多次响应点击等;
总结@H_502_5@
用在什么场景合适,主要基于你想要的效果,滚动监听你也可以用防抖控制,如果你希望最后一次才执行计算的话;提交按钮你也可以用节流,如果你希望较短时间内可以多次提交的话;
他们都是解决类似的问题;区别就在于你希望间隔执行(节流false/true),还是最后停止触发才执行(防抖clearTimeout)