JS 防抖与节流的原理分析和代码手写

目录

前言

作用 

防抖

使用场景

分析原理

手写代码

节流

使用场景

原理分析

手写代码

小补充

前言

前一段时间，我学习了 JS 的防抖与节流，自认为掌握住了它们，当我在做面试题的时候，遇到了一道：手写节流，我当时就觉得这题稳了！然鹅，当我结束题目，再去翻看节流的代码时，发现，我磕磕绊绊写出来的，并不是正确答案！！因此，我决定再重新梳理一遍防抖和节流，并记录下来。

作用 

对用户短时间内的操作进行限制，避免页面重复渲染， 降低服务器的压力，减少资源消耗，优化性能。

防抖

使用场景

例如：当用户在文本框输入一段内容时，每输入一个字符，就会触发一次事件，但这个频繁触发事件是不必要的，没用的，只需要在最后把所有的内容输入完成，再去触发相应事件即可。这个地方就用到了防抖的原理，js 会将前面所有的点击操作销毁，只会执行最后的一次操作，当最后一次执行完成，过了设置的时间间隔，这时，再次触发时，就会正常执行相应的操作。

分析原理

当用户触发一个事件，会立马产生一个计时变量 timer ，每次触发该事件之前，会先判断是否超过设置的时间间隔，如果没有超过，也就是短时间内，重复操作同一 dom ，这时，会先判断计时变量 timer 是否存在，存在的话，会将其清除，重新开始计时，同时，之前的 dom 操作也会失效，只会在最后一次触发回调函数。简单来说，在不超过设置时间间隔内，重复操作同一dom元素，只会执行最后一次。

手写代码

    //参数：要执行的回调函数fn，延时时间delay，如delay = 1000
    function debounce(fn,delay){
            // 计时
            var timer = null;
            return function(){
                // this是触发 fn 回调函数的那个（组件）实例对象
                var that = this;
                var args = arguments;
                // 如果timer已经存在，则清除
                if(timer){
                    clearTimeout(timer);
                }

                timer = setTimeout(()=>{
                    fn.apply(that,args);
                },delay);
            }
        }

节流

使用场景

例如：用户频繁点击提交按钮，这个时候，多次的点击，提交的内容都是一样的，因此，当用户第一次点击提交按钮时，就发送请求，触发回调，而接下来的第 2 次，……第 n 次的提交操作（在设置的时间间隔内）都不触发回调函数，直到第一次的操作与第 n+1次的操作，时间超过了设置的时间间隔。也就是，当用户频繁操作 dom 元素时，在设置的时间间隔内，只执行第一次操作触发的回调。

原理分析

定义一个标志位，当超过了规定的时间间隔，标志位 flag 为 true ，执行回调函数，否则为 false ，不执行回调函数。

手写代码

    export default function throttle(fn,delay){
            //设置初始状态为true，允许执行fn
            var falg = true;
            return function(){
                var that = this;
                var args = arguments;
                // 没有超过设置的时间间隔
                if(!falg){
                    return false;
                }

                // 超过设置的时间间隔，允许执行fn
                fn.apply(that,args);
                // 此时是在时间间隔内，将标志位设置为false，禁止执行fn
                flag = false;

                setTimeout(()=>{
                    // 超过时间间隔，把标志位设置为true，允许执行fn
                    flag = true;
                },delay);
            }
        }

小补充

Vue 框架中，已经为我们事先封装好防抖和节流的代码，只需要执行命令 npm install 安装即可。