面试:防抖和节流有什么区别

前端之家收集整理的这篇文章主要介绍了面试:防抖和节流有什么区别前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
防抖 和 节流 都是为了节省资源,防止js多次重复执行导致卡顿等问题而产生的;

实现上@H_502_5@

防抖

触发事件后,设置一个定时器settimeout,在还没执行的时间内,如果再次触发该事件,就重新计时。

节流

触发事件后,设置一个变量为 false,执行结束时设置变量为 true;再次触发事件,判断如果变量还是false,就不执行,变量为true 才执行下一次。

表现上@H_502_5@

防抖

规定时间内再次触发事件,由于每次都会清除上一次的倒计时,所以它实际上只会真正执行最后一次处理; 对! 强调执行一次;所以很适合的场景有: input监听ajax候选词,防止点击多次提交;

节流

规定时间内再次触发事件,由于是监听变量的方式,因此当变量重新被设置为true时,js又会执行;强调的是排队执行,可以执行多次;适合的场景有:滚动事件监听,多次响应点击等;

总结@H_502_5@

用在什么场景合适,主要基于你想要的效果,滚动监听你也可以用防抖控制,如果你希望最后一次才执行计算的话;提交按钮你也可以用节流,如果你希望较短时间内可以多次提交的话;
他们都是解决类似的问题;区别就在于你希望间隔执行(节流false/true),还是最后停止触发才执行(防抖clearTimeout)

防抖是最后执行@H_502_5@

节流是间隔执行@H_502_5@

猜你在找的程序笔记相关文章