JS函数的节流与防抖简单理解与运用

前言概述

大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。

同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。

什么是节流

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

// //自定义函数节流
function throttle(fn, wait) {
        let endTime = +new Date
        return function () {
            if (+new Date - endTime < wait) return console.log('节流');
            fn.apply(this, arguments)
            endTime = +new Date
        }
    }

简单运用：

  function a() {
        console.log(111);
    }
    let zz =throttle(a,1000)
    setInterval(() => {
        zz()
    }, 50)

打印结果：

什么是防抖

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

//自定义函数防抖
   function debounce(fn, wait) {
        let timer = null
        return function () {
            if (timer) {
                clearInterval(timer)
                console.log('防抖')
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments)
                timer = null
            }, wait);
        }
    }

简单运用：

 function a() {
        console.log(111);
    }
    let zz = debounce(a, 1000)
    for (let index = 0; index < 2; index++) {
        zz()
    }

打印结果：

总结

函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。
区别在于:

好了，这就是简单的函数防抖和函数节流，作者目前还是一个前端小白，若有不对的地方，欢迎各位大佬提出！！！