节流和防抖函数，函数的节流和防抖

1 基于操作的节流，防抖

• 定义函数，绑定滚动事件

var num = 0;
function demo(){
    console.log(++num);
}

// 基于操作的节流，防抖
// 定义定时器句柄
var timebar
// 高频事件
window.onscroll  = function(){
    // 基于操作的，在高频事件中，执行最后一次
    // 将函数放在定时器中，每次触发事件，取消执行，直到最后一次，滚动事件停止的时候执行一次
    clearTimeout(timebar);
    timebar = setTimeout(demo,200);
}

• 封装成函数

window.onscroll  = function(){
	// 使用防抖函数
	throttle(demo);
}


function throttle(fn){
    // 清除定时器
    clearTimeout(fn.__timebar);
    // 执行定时器
    // 函数也属于对象，因此可以添加属性，一般都用两个下划线封装私有属性
    fn.__timebar = setTimeout(fn,200);
}

2 基于时间的节流

// 定义锁
var lock = false;
// 基于时间的节流
window.onscroll = function(){
    if (lock){
        return;
    }
    lock = true;
    // 在1秒之内，无论触发多少次，只能执行一次
    demo(); // 先执行一次，然后一秒之后才能执行第二次
    setTimeout(function(){
        lock = false;
    },1000)
}

• 封装成函数

// 定义锁
var lock = false;
// 基于时间的节流
window.onscroll = function(){
    throttle(demo);
}

// 节流器方法
function throttle(fn){
    if (fn.__lock){
        return;
    }
    fn.__lock = true;
    fn();
    setTimeout(function(){
        fn.__lock = false;
    },1000)
}