一文助你快速了解JavaScript的防抖和节流的使用和作用

什么是防抖和节流

首先为什么会有这个防抖和节流呢？由于我们页面的用户交互都是JavaScript进行写的，那麽当用户在体验我们的页面时候就会出现一个现象，可能有些用户还没有使用的功能，这时候函数应该不需要执行。如果一些暂不需要执行的函数却一直在执行就会，就会出现浪费浏览器的CPU资源，造成页面卡顿等现象！这时候就需要对用户操作进行判断，对所需的功能进行针对性开放。

函数节流是指一定时间内js方法只跑一次。比如时钟里面的分针一样，只有秒针走完一圈它才会动一下。我们可以这样去理解这个 节流。
函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。
下面咱们可以通过一些代码进行实现看看

代码实现

节流的代码：

	// 定义一个状态
	var flag = true;
	// 定义一个元素下拉
    document.getElementById("container").onscroll = function() {
        if(flag) {
            // 判断是否已空先，如果在执行，直接return 出来
            return;
        }
		// 改变状态
        flag = false;
        // 通过一个定时器实现一个异步操作
        setTimeout(function() {
            console.log("函数节流");
            flag = true;
        },1000);
    };

防抖代码：
使用场景： 最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。以下还是以页面元素滚动监听的例子；

	var timer = false;
    document.getElementById("container").onscroll = function () {
        // 清楚定时器
        clearTimeout(timer);

        // 定时器开启
        timer = setTimeout(() => {
            console.log("函数防抖");
        }, 1000);
      }