vue 中防抖和节流封装和使用

1、封装。在utils新建throttle.js 

// 节流
export function _throttle(fn, interval = 1000) {
    let last;
    let timer;
    return function () {
        let th = this
        let args = arguments;
        let now = + new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

// 防抖
export function _debounce(fn, delay = 1000) {
    let timer;
    return function () {
        let th = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

2、使用。在有需要的页面引入

import { _debounce, _throttle } from '@/utils/throttle'

methods: {
  onSearch : _throttle( function (val){
        // 业务代码

  }),
}