防抖和节流

前言

随着前端飞速的发展，用户体验也越来越重要。大家在逛一些网站时，会不会手贱，去疯狂的点击某个按钮，但是做了后却发现，网站都是，你点归你点，我动算我输。这其实就是因为做了防抖节流操作啦，为什么这两个东西这么神奇呢？让我们一起探究一下吧。

一、防抖（debounce）

1.什么是防抖？

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

2.如何实现防抖

思路：

1. 触发事件时，给一个setTimeout定时器来延迟触发；
2. 每次点击清除并重置定时器；
3. 使用闭包来存储定时器

代码如下：

 function debounce(func, wait) {
       let timeout; //创建一个标记用来存放定时器的返回值
	    return function () {  //闭包函数
	        let context = this; // 保存this指向
	        let args = arguments; // 拿到event对象
	
	        clearTimeout(timeout) //每当用户输入的时候把前一个 setTimeout clear 掉
	        timeout = setTimeout(function(){ // 每当用户输入的时候把前一个 setTimeout clear 掉
	            func.apply(context, args)
	        }, wait);
	    }
     }

使用方法

var btn = document.getElementById('input');

btn.addEventListener('mousemove', debounce(submit, 2000), false);

function submit(e) {
  console.log(111);
}

3.应用场景

1. 高频触发的事件监听回调:比如onscroll, onresize, oninput, touchmove等；
2. 用户名,手机号,邮箱输入验证时的输入框搜索自动补全事件，搜索框搜索输入,只需用户最后一次输入完,再发送请求；
3. 频繁操作点赞和取消点赞；
4. 浏览器窗口大小改变后,只需窗口调整完成后,再执行resize事件中的代码,防止重复渲染；

二、节流（throttle）

1.什么是节流？

就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率

2.如何实现节流

思路：

1. 设置一个变量，限制为true才能进入函数，进入后变为false。
2. 设置setTimeout定时器在规定时间后才能进入执行函数再次触发。
3. 使用闭包存储变量。

代码：

    function throttle(fn) {
       	 let canRun = true; // 通过闭包保存一个标记
	      return function () {
	        if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
	        canRun = false; // 立即设置为false
	        setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中
	          fn.apply(this, arguments);
	          // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
	          canRun = true;
	      	 }, 500);
	  };
 }	

使用

 const input = () => console.log("111");
 div.addEventListener("mousemove", throttle(input, 1000));

3.应用场景

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)；
2. 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；
3. 重复提交表单。

---

总结

本次的演示就在这啦，思路是非常简单的，希望大家都能动手去敲一敲哟！