js节流和防抖别看这一篇

最新推荐文章于 2024-08-09 00:05:00 发布

野生技术协会

最新推荐文章于 2024-08-09 00:05:00 发布

阅读量4.8k

点赞数

分类专栏： web前端文章标签： underscore js节流

本文链接：https://blog.csdn.net/shuixiou1/article/details/81147511

版权

本文介绍了JavaScript中节流和防抖的概念及其应用场景，如鼠标异步点击和滚动事件处理。通过对比分析，解释了节流是限制函数在一定时间内只执行一次，而防抖则是在多次触发后只执行最后一次。还提到了使用underscore.js库中的节流和防抖方法，并探讨了其内部实现机制，包括闭包和setTimeout的运用。

摘要由CSDN通过智能技术生成

前言：我们在做页面事件绑定的时候，经常要进行节流处理，比如鼠标异步点击，去执行一个异步请求时，需要让它在上一次没执行时不能再点击，又或者绑定滚动事件，这种持续触发进行dom判断的时候，就要按一定频率的执行。

一、伪理论：

概念: 节流和防抖我认为都可以称之为节流。区别：防抖就是不想持续操作的节流，节流就是想固定频率执行的。
节流:函数节流是指一定时间内js方法只跑一次。前一次没结束，后一次不会跑。比如滚动条这种持续按频率触发。
防抖:函数防抖是指一定时间内js方法只跑一次。前一次没结束，后一次触发会按后一次的新间隔时间计算。比如按钮持续点击的限速。

二、原始的节流操作：

<!-- 一、最原始进行节流操作的函数 -->
<script type="text/javascript">
	window.onload = function(){
		
		/**基本防抖案例:先清除，后setTimeout进行执行**/
		document.querySelector("#send").addEventListener("click",function(e){
			clearTimeout(window.mytime_01);
			window.mytime_01 = setTimeout(function(){ 
				console.log("发射...");
			}, 500);
		});
		
		/**基本节流案例:setTimeout执行完时，恢复标志位，下一次才能执行*/
		var mytime_02 = true;
		window.onscroll = func