防抖: 指触发事件后在 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 } }}