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

@H_403_0@防抖 和 节流 都是为了节省资源,防止js多次重复执行导致卡顿等问题而产生的;

实现上

防抖

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

节流

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

表现上

防抖

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

节流

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

总结

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

防抖是最后执行

节流是间隔执行

相关文章

这个问题和curl无法访问https资源是类似的,现在curl可以访问https资源,但是使用pecl安装扩展的时候不行...
在浏览器输入chrome://flags/回车,找到Omnibox UI Hide Steady-State URL Scheme and Trivial Subdoma...
方法一: 我们都知道Ubuntu有一个专门用来安装软件的工具apt,我们可以用它来全自动安装arm-linux-gcc。...
中文的windows下的cmd默认使用GBK的编码,敲代码时,页面使用的是UTF-8(65001),而powershell控制台默认...
提示错误: arm-linux-gcc:Command not found PATH里有/usr/oca/arm/bin,但是make的时候,就是找不到 a...
我在Graph API开发中用的最多的测试工具就是Graph Explore,这个是微软开发的网页版的Graph API的测试工...