防抖: 指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会从新计算函数执行工夫。
应用场景:
1、搜寻框搜寻,只执行最初一次
2、滚动条滚动等事件,实现后执行一次
/*
* 防抖 - 简易版
* @param func {function} 回调函数
* @param wait {number} 毫秒数
*/
function debounce(func, wait) {
let timeout
return function() {
const context = this
const args = arguments
if (timeout) {clearTimeout(timeout)
}
timeout = setTimeout(() => {func.apply(context, args)
}, wait)
}
}
/**
* 防抖 - 立刻执行版 * @param func {function} 回调函数
* @param wait {number} 毫秒数
* @param immediate {boolean} 是否先执行一次
*/
function debounce(func, wait, immediate) {
let timeout
return function() {
const context = this
const args = arguments
if (timeout) {clearTimeout(timeout)
}
if (immediate) {
const callNow = !timeout
timeout = setTimeout(() => {timeout = null}, wait)
// 第一次 timeout 为 undefined,先执行函数
if (callNow) {func.apply(context, args)
}
} else {timeout = setTimeout(() => {func.apply(context, args)
}, wait)
}
}
}
/**
* 防抖 - 立刻执行 - 返回值 * @param func {function} 回调函数
* @param wait {number} 毫秒数
* @param immediate {boolean} 是否先执行一次
*/
function debounce(func, wait, immediate) {
let timeout, result
return function() {
const context = this
const args = arguments
if (timeout) {clearTimeout(timeout)
}
if (immediate) {
const callNow = !timeout
timeout = setTimeout(() => {timeout = null}, wait)
// 第一次 timeout 为 undefined,先执行函数
if (callNow) {func.apply(context, args)
}
} else {timeout = setTimeout(() => {result = func.apply(context, args)
}, wait)
}
return result
}
}
节流: 指间断触发事件然而在 n 秒中只执行一次函数。
应用场景:
1、上拉加载和下拉刷新,或者鼠标挪动等事件
/**
* 节流 * @param func {function} 回调函数
* @param wait {number} 毫秒数
*/
function throttle(func, wait) {
let previous = 0
return function () {let now = Date.now()
const context = this
const args = arguments
if (now - previous > wait) {func.apply(context, args)
previous = now
}
}
}