防抖： 多次触发只执行一次， 并在函数触发结束的时候执行。
- 防抖第一版，无法复用
var timeout, c = 0;
var box = document.querySelector('#box')
box.onmousemove = function() {
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(function(){
console.log(c++)
}, 200)
}
- 第二版
function debounce(func, wait) {
var timeout
return function() {
if(timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(function() {
func.call(null)
}, wait)
}
}
var c = 0;
var box = document.querySelector('#box')
box.onmousemove = debounce(
function() {
console.log(c++)
},
200)
3.第三版
修改函数调用时this的指向问题
function debounce(func, wait) {
var timeout
return function() {
let self = this
if(timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(function() {
func.call(self)
}, wait)
}
}
4.第四版
回掉函数 参数传递
function debounce(func, wait) {
var timeout
return function() {
let self = this;
// 参数转为数组
let args = Array.prototype.slice.call(arguments);
if(timeout) {
clearTimeout(timeout);
}
timeout = setTimeout(function() {
func.apply(self, args);
}, wait);
}
}
var c = 0;
var box = document.querySelector('#box')
box.onmousemove = debounce(
function(e) {
console.log(e) // 传入事件对象
console.log(c++)
},
200)
5.第五版
加入立即触发
function debounce(func, wait, immediate) {
var timeout
return function() {
let self = this;
// 参数转为数组
let args = Array.prototype.slice.call(arguments);
if(timeout) {
clearTimeout(timeout);
}
if(immediate) {
// 此处timeout必须进行赋值操作，因为闭包的关系，再把此函数作用域内的timeout设置为null， 内存空间的timeout其实还是存在
let callNow = !timeout
timeout = setTimeout(function(){
timeout = null
}, wait);
// !timeout 一直是有值得状态，取得闭包的内存空间内的timeout
if(callNow) {
func.apply(self, args)
}
} else {
timeout = setTimeout(function() {
func.apply(self, args);
}, wait);
}
}
}
...
- 函数返回问题
js事件模型，settimeout是异步返回，所以此处用回掉函数活着promise来解决
function debounce(func, wait, immediate) {
var timeout
return function() {
let self = this;
// 参数转为数组
let args = Array.prototype.slice.call(arguments);
return new Promise(function(resolve) { // 返回一个promise对象
if(timeout) {
clearTimeout(timeout);
}
if(immediate) {
var callNow = !timeout
timeout = setTimeout(function(){
timeout = null
}, wait);
if(callNow) {
resolve(func.apply(self, args)) //值操作
}
} else {
timeout = setTimeout(function() {
resolve(func.apply(self, args));
}, wait);
}
})
}
}
var c = 0;
var box = document.querySelector('#box')
let moveFunc = debounce(
function(e) {
return c++
},
1000, true)
box.onmousemove = function() {
moveFunc().then(res => { // 因为又返回了一个函数，所以必须调用才会又promise返回值
console.log(res)
})
}
underscore throttle
/**
频率控制 返回函数连续调用时，func 执行频率限定为 次 / wait
@param {function} func 传入函数
@param {number} wait 表示时间窗口的间隔
@param {object} options 如果想忽略开始边界上的调用，传入{leading: false}。如果想忽略结尾边界上的调用，传入{trailing: false}
@return {function} 返回客户调用函数
*/
