背景

在lodash函数工具库中，防抖_.debounce和节流_.throttle函数在一些频繁触发的事件中比较常用。

防抖函数_.debounce(func, [wait=0], [options=])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟wait毫秒后调用func方法。

参数

• func(Function): 要防抖动服务器托管网的函数。
• [wait=0](number): 需要延迟的毫秒数。
• [options=](Object): 选项对象。
• [options.leading=false](boolean): 指定在延迟开始前调用。
• [options.maxWait](number): 设置func允许被延迟的最大值。
• [options.trailing=true](boolean): 指定在延迟结束后调用。

返回

• (Function): 返回 debounced（防抖动）函数。

节流函数_.throttle(func, [wait=0], [options=])

创建一个节流函数，在 wait 毫秒内最多执行func一次的函数。

参数

• func(Function): 要节流的函数。
• [wait=0](number): 需要节流的毫秒。
• [options=](Object): 选项对象。
• [options.leading=true](boolean): 指定调用在节流开始前。
• [options.trailing=true](boolean): 指定调用在节流结束后。

返回

(Function): 返回 throttled（节流）的函数。

在vue中使用防抖节流函数的问题

踩坑1

防抖节流函数实际上起到一个“稀释”的作用，在vue项目中我们可能会这样写（节流为例）。

    

        加1
        
{{ number }}
    



import { throttle } from 'lodash';
export default {
    data() {
        return {
            number: 1
        };
    },
    methods: {
        // add函数做节流处理
        add_throttle: throttle(this.add, 1000),
        add() {
            this.number++;
        }
    },
};

然后我们信心满满地F12打开控制台……

上面说add 这玩意儿 undefined了。

这其实是this的指向问题。实际上这里的this并不是vue实例（至于是什么，往下看你就知道了[doge]），所以自然不存在add()方法了。

踩坑2

既然直接使用this.add() 不成，那我们换个思路，把this.add()放在函数里呢?

methods: {
    // 做节流处理
    add_throttle: throttle(() => {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

然后，自信满满地再次打开控制台……

第一眼，诶，没报错，于是点击按钮……

梅开二度……

其实还是this的指向问题。我们知道箭头函数是没有this的，所以这里的this相当于踩坑1里的this ，让我们打印下，揭开它的庐山真面目。

methods: {
    // 做节流处理
    add_throttle: throttle(() => {
        console.log(this);
    }, 1000),
    add() {
        this.number++;
    }
}

好家伙，原来这里的this本身就是undefined。

解决

既然是this的指向问题，那么只要保证this指向vue实例就行了，箭头函数换成声明式函数。

methods: {
    // 做节流处理
    add_throttle: throttle(function () {
        this.add();
    }, 1000),
    add() {
        this.number++;
    }
}

结果很nice。

至于为什么，大概是lodash的_.debounce函数对this做了一些处理（_.thro服务器托管网ttle函数本质还是调用了_.debounce函数），有兴趣的小伙伴儿可以看看_.debounce的源码。

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 小白学习应用构建分享-参照用法

什么是参照？ 只看名词，不太好理解，我们看下图，是不是一看就明白了，参照就是一份输入参考，当用户进行输入时，可以从已有数据中进行选择。 怎么创建参照? 假设业务场景是一张采购单，其中一个字段是【物料品牌】，我们需要为【物料品牌】创建一个参照。 2.1 在业务对…