防抖和节流在vue中的应用

概念： 

防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数，

在vue中使用：

首先 在util.js 

/**
 * @desc 间隔函数
 * @param fn 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 * @param type 1表示防抖， 2表示节流
 */
export function interval(fn, wait, type,immediate) { //
    let now = immediate ? 0 : Infinity
    return function (...args) {
        let next = new Date().getTime();
        if (next - now > wait) {
            now = next
            fn.apply(this, args)
        }else {
            if(type==1) now = next
        }   
    }
}

然后 在需要使用 防抖和节流 vue的页面

import {interval} from './util'
    export default {
        name: '',
        methods: {
            debounce: interval(function(){
                console.log(this)
            },500,1,true)
        }
    }

最后需要注意的是，以上所有使用function 的地方 都不要使用箭头函数，否则会导致this 指向错乱