防抖和节流(React和Vue版)

背景

在公司项目中有购物车功能，最近在测试中碰到一个问题，在点击购物车某个商品的添加或者减少按钮时，每次的点击后都会请求服务器，如果快速点击按钮将会对服务器造成大量的请求，这显然会占用大量的服务器资源。而防抖和节流是控制事件触发频率的方法，可以对此类事件进行很好的限制。

防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。在我的业务场景里面就是，一段时间内不管你点击了多少次按钮，只执行最后一次的点击事件。

React

debounce = (method, delay) => {
   
        //设置一个检验setTimeout是否在执行的参数，默认未执行
        let {
   timer = null} = this.state;
        //将当前的this赋值给that
        //否则在下面函数作用域中this是当前函数作用域，没有setState方法
        let that = this;
        return function (...args) {
   
            //检验是否有正在执行的定时器方法，如果有，就把上一个定时器废弃
            if (timer) clearTimeout(timer);
            //生成一个新的定时器方法重新计数
            timer = setTimeout(function () {
   
                method.apply(this, args);
            }, delay)