lodash实现防抖和节流功能及原生实现

这里以搜索功能为例

监听边输入边搜索：@input
敲回车搜索 @keyup.enter.native=""
点击按钮搜索 @click

搜索性能优化：主要利用防抖和节流

防抖和节流：主要目的是为了降低高频事件触发，减少dom操作或请求次数，提升性能

通常高频事件：onscroll,onresize,keyup/keydown,mousemove

 防抖：在固定时间内，如果有事件触发，则会再延长固定时间，直到固定时间内没有触发事件再做处理 例如：电梯和屏保。
 节流：指定一个固定时间，无论是事件触发与，只要到了固定时间，都会触发。

 第三方函数工具库：lodash
安装： npm i lodash
引入：import _ from ‘lodash’

//防抖
getList:_.debounce(function() {
  this.getUserList()
},2000),

//节流
getList:_.throttle(function() {
  this.getUserList()
},2000),

js 原生（可写全局方法）：

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


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