ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

防抖和节流的总结

2020-03-09 19:53:16  阅读:177  来源: 互联网

标签:总结 触发 防抖 节流 事件处理 事件 函数


在进行窗口的resize、scroll,输入框内容校检等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟。

此时我们还可以采用防抖和节流的方式来减少调用的频率,同时又不影响实际效果。

函数防抖

函数防抖:当持续触发事件时,一定时间内没有在触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重现开始延时。

                  当持续触发scroll事件时,时间处理函数handle只在停止滚动1000毫秒之后才会调用一次,也就是说在持续出发scroll事件的过程中,事件处理函数handle一直没有执行。

函数节流

函数节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水流头放水,阀门一开,水就往下流,而我们要做的就是在用完之后,

                   把它往小的调,而节流就是如我们的心意按照一定规律在某个时间间隔内慢慢往下流。

总结

函数防抖:将几次操作合并为一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否达到一定时间来触发函数。

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

 

标签:总结,触发,防抖,节流,事件处理,事件,函数
来源: https://www.cnblogs.com/chuliwei/p/12450587.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有