关于js的防抖和节流

给大家了解一下基础的js函数防抖和节流

先给大家讲一下业务场景：比如当我们用vue或者其他框架写一个点赞按钮的时候，关于这个点赞按钮

我们是不是点击之后，这篇文章的点赞量是不是要加1，但是如果用户一直点击的话，我们设置让用户只能点赞一次，但是有些用户飞速的点赞，此时我们得监测用户的行为，比如在3秒内点击不调用那个js函数

<button onclick="hangclick(num)">点赞</button>

这个是就得用到我们的防抖函数了

//防抖的封装
function debounce(fn, delay = 500) {   //fn要执行的方法 delay时间默认是500
            let timer;
            return function () {
                var self = this   //拿到this vue中使用指向vue
                var args = arguments  //获取参数
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                   fn.apply(self, args)
                }, delay)	
            }
        }


 let input = document.querySelector("input");
        input.onkeyup = debounce((arr) => {  //如果有参数会被收集到这里
            console.log(input.value);
        })

// vue中使用

  methods: {
    getCode: throttle(function () {
      this.$refs.registerForm.validateField('mailbox',err => {
        if (err) return;
        console.log("发送");
      });
    }, 5000),
  },

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

关于节流的代码

   let input = document.querySelector("input");

        input.onkeyup = throttle(()=>{
            console.log(input.value);
        },10000)

        function throttle(fn,tiem = 1000) {
            let lock = true;  
            return function(){
                var self = this   //拿到this vue中使用指向vue
                var args = arguments  //获取参数
                if (!lock) {
                     return
                }
                fn.apply(self, args) // 回调函数中拿到参数
                lock = false   //关锁
                setTimeout(() => {
                    lock = true
                }, tiem);
            }
        }

当触发事件的时候，我们设置一个定时器，再次触发事件的时候，如果定时器存在，就不执行，直到delay时间后，定时器执行执行函数，并且清空定时器，这样就可以设置下个定时器。当第一次触发事件时，不会立即执行函数，而是在delay秒后才执行。而后再怎么频繁触发事件，也都是每delay时间才执行一次。当最后一次停止触发后，由于定时器的delay延迟，可能还会执行一次函数。

总结

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 网络 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。