【JS】节流、防抖的介绍

前言

刚开始看到这三个名词有点不知所措，不清楚到底指的是啥，后面了解了才知道其实我们有时已经使用过了，只是不知道这一个名词而已。下面就来详细的介绍一下。

节流

1、概念：控制函数在某个时间段内只触发一次

一个简单的例子，比如最近因为国外疫情的爆发，很多人选择回国。那么这段时间安检人员进行安检是一个持续触发的事件，然后我们控制安检人员每30s执行一次安检。这就是节流：控制函数在某个时间段内只触发一次

2、应用和目的
节流主要针对一些会持续触发的事件（比如scroll、mousemove等），因为我们触发鼠标移动，滚动条滚动。因为这是一个持续的过程，实际上他们不止会调用一次，如果我们实际只需要它调用一次，那么剩下的便是无用的了，如果是一些DOM操作，特别是ajax。那么很容易造成计算机资源的浪费，卡顿。
3、实现
1）定时器
原理：利用定时器setTimeout ，首先定义一个开关，初始值为false，若开关为false则开启定时器，此时开关不再为false

代码：

    var num = 0
    function show(){
	   console.log(num++)
    }
   
    function throttle(callback, wait) {
    var  timer = false;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(() => {
                timer = false;
                callback.apply(context, args)
            }, wait)
        }
    }
   }

    window.addEventListener('scroll',throttle(show,1000))

2）时间戳
原理：距离事件触发时间隔大于n秒则执行函数，同时更新初始时间戳

代码：

    var num = 1
    function show(){
	   console.log(num++)
    }
   
    function throttle(callback, wait) {
    var time1 = Date.now()
    return function() {
        var context = this;
        var args = arguments;
		var time2 = Date.now()
        if (time2 - time1 >= wait) {
            callback.apply(context,args);
            time1 = Date.now();
        }
    }
   }
    window.addEventListener('scroll',throttle(show,1000))

防抖

1、概念： 触发事件之后，若一段时间内没有在触发事件则执行函数，否则再继续等待一段时间。

还是一样举个例子，比如国外回来的人安检之后要派车送他们到隔离点。隔离人员陆陆续续的上车（事件触发），每上一个人都等待几秒，如果后面没人了，则发车（触发函数），假如又有一个人上车，那么又进入了等待期，并不会发车（执行函数）。

即我们只在乎结果，不在乎过程，无论过程多长（触发多少次事件，依然只执行一次函数）。

2、应用和目的：
跟节流一样

3、实现
1）结束事件时执行
原理：事件触发后，函数在n秒后执行，若n秒内再次触发事件，则重新计时

代码：

    var num = 1
    function show(){
	   console.log(num++)
    }
   
    function debounce(callback, wait) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
                callback.apply(context, args)
            }, wait);
        }
    }
    window.addEventListener('scroll',debounce(show,1000))

2）事件开始时执行
原理：事件触发时立即执行、n 秒内不触发事件才能继续执行函数的效果。
代码：

    var num = 1
    function show(){
	   console.log(num++)
    }
   
    function debounce(callback, wait) {
        let timeout = false;
        return function () {
            let context = this;
            let args = arguments;
            if (timeout) clearTimeout(timeout);
            let nowTime = !timeout;
            timeout = setTimeout(() => {
                timeout = false;
            }, wait)
            if (nowTime) callback.apply(context, args)
        }
    }
    window.addEventListener('scroll',debounce(show,1000))

参考资料：https://www.jianshu.com/p/c8b86b09daf0