防抖和节流的性能优化

一、防抖和节流的概念

• 防抖：指触发事件后在n秒内事件只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。
• 节流：指连续触发事件，但是在一段时间内只能执行一次。

二、防抖和节流函数

//简单防抖函数
var box = document.querySelector('.box');
var testDebounce = debounce(move, 1000);

box.onmousemove = testDebounce;

function move(ev) {
    console.log(ev, this);
    box.innerHTML = ev.clientX;
};

function debounce(fn, waitTime) {
    let timmer = null;
    return function() {
      timmer && clearTimeout(timmer);
      timmer = setTimeout(() => {
        fn.apply(this, arguments)
      }, waitTime);
    }
}

// 简单节流函数(防止频繁触发事件)
var testjl = jl(move, 1000);
box.onmouseover = testjl;

function jl(fn, waitTime) {
    let timmer = null;
    return function() {
        if(!timmer) {
            timmer = setTimeout(() => {
                timmer = null;
                fn.apply(this, arguments);  
            }, waitTime);
        }
    }
}

// 使用时间戳
function jl(fn, waitTime) {
    let last = 0;
    return function() {
        let now = Date.now();
        if(now - last > waitTime) {
            fn.apply(this, arguments);
            last = now;
        }
    }
}