防抖和节流

防抖

防抖的原理

事件触发n秒后才执行，如果在n秒内又触发该事件，则以新的触发时间为准。

实现防抖函数的关键点

• 定时器
• 解决this指向
• 解决event对象问题(参数问题)
• 返回值

防抖的实现

function wlk_debounce(func,wait){
    let timeout;
    return function(...args){
        let context = this;
        clearTimeout(timeout);
        timeout = setTimeout(function(){
           return func.apply(context,args);
        },wait);
    }
}

节流

节流的原理

类似于技能冷却。函数每隔一段时间执行一次。

实现节流函数的关键点

• 解决this指向
• 解决event对象问题(参数问题)
• 返回值

节流的实现

节流函数实现方式有两种：定时器，时间戳。

• 定时器方式

//定时器
function wlk_throttle(func,wait){
    let valid = true; //指示技能可用吗？
    return function(...args){
        let context = this;
        if(!valid){
            return false;
        }
        valid = false;
        setTimeout(function(){
            valid = true;
            return func.apply(context,args);            
        },wait)
    }
}

• 时间戳方式

// 时间戳
function wlk_throttle(func,wait){
    let previous = 0;//保存上次执行时的时间戳
    return function(...args){
        let context = this;
        let now = +new Date();
        if(now-previous>wait){
            previous = now;
            return func.apply(context,args);
        }
    }
}

使用示例

# 防抖
function sayHello(name) {
     console.log(`${name}-你好！`);
 }

var run = wlk_debounce(sayHello, 2000);
window.onscroll = function () {
    run("wlk");
}

# 节流
function sayHello(name) {
     console.log(`${name}-你好！`);
 }

var run = wlk_throttle(sayHello, 2000);
window.onscroll = function () {
    run("wlk");
}