防抖 && 节流

以下两重情况都是用于高频触发事件，根据不同场景选择合适的用法。对于有停顿的高频触发事件建议选择防抖，然而对于高频触发并且连续的事件，选择节流；

防抖：

防抖：

防止连续多次触发，n秒内连续触发则只触发最后一次。目的：只执行一次

原理：

触发之前判断是否已经触发，已经触发就取消执行上一次的事件，然后执行本次事件。

案例：

首先，一个全局变量 fn 接住了 debounce 的一个返回值，闭包形成， debounce 内部的 id 被保存住，因此，每次 fn 执行的时候，它所用到的 id 都是一个

防抖的原理是，如果用户频繁的点击按钮，上一次的 setTimeout 都会立刻被下一次清除，需要执行的函数始终打不出来，只有最后一次没人清除它，因此会被执行。

点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/jquery.js"></script>
	</head>
	<body>
	 <button id="btn1">btn1</button>
	</body>
	<script>
	   function debounce(){
	             let id;
	             return function(){
	                 clearTimeout(id);
	                 id = setTimeout(function(){
	                     console.log('button clicked',id)
	                 },5000);
	             }
	         }
	         var fn = debounce();
	         $("#btn1").on('click',function(e){
	             fn();
	         })
	</script>

</html>

：节流：

节流：

防止连续多次触发，n秒内连续多次触发则n秒内执行一次。目的：减少执行次数

原理：

触发之前判断是否已经触发，已经触发就取消当前本次执行事件，继续执行上一个事件。

案例

节流的原理是当函数被成功的执行过一次，本次成功执行的时间会被记录下来，那么当用户频繁点击按钮的时候，这些次记录的时间距离上次成功执行的时间太短，小于阈值，因此不被执行

点击查看代码 
<body>
	 <button id="btn1">btn1</button>
	<script>
	 
			// 节流
     function abc() {
              let time = new Date();
              return function () {
                  let time1 = new Date();
                  if (time1 - time > 1000) {
                      console.log(time1 - time);
                      time = time1;
                  }
              }
          }
          let fn = abc();
          $("#btn1").on('click', function (e) {
              fn();
          })
	</script>
	</body>
posted @ 2022-10-10 22:17  一梦逐一生  阅读(32)  评论(0)    收藏  举报