Lodash realizes anti shake and throttling functions and native implementation

Take the search function as an example

Listen, input and search ：@input
Hit enter to search @keyup.enter.native=""
Click the button to search @click

Search performance optimization ： Anti shake and throttling are mainly used

Anti shake and throttling ： The main purpose is to reduce the triggering of high-frequency events , Reduce dom Number of operations or requests , Lifting performance

Usually high frequency events ：onscroll,onresize,keyup/keydown,mousemove

  Shake proof ： In a fixed time , If an event triggers , Then the fixed time will be extended , Do not process until no event is triggered within a fixed time for example ： Elevator and screen saver .
  throttle ： Specify a fixed time , Whether it's an event trigger or , As long as the fixed time comes , Will trigger .

  Third party function tool library ：lodash
install ： npm i lodash
introduce ：import _ from ‘lodash’

// Shake proof 
getList:_.debounce(function() {
  this.getUserList()
},2000),

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

js Native （ Writable global methods ）：

export function _debounce(fn, delay) {
    // Shake proof 
    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);
    };
}


//  throttle 
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);
        }
    }
}