JavaScript之 函数节流(Throttling) 与 防抖(Debounce)

Throttling:在监听鼠标移动事件、盒子滚动事件等使用节流技术能节省性能消耗
/**
* 节流函数(每隔t执行一次)
*/
function Throttling(fn, t) {
const timer = null return function() {
      // 执行完上一次的内容后才执行下一次的内容
if(!timer) {
const arg = arguments
const context = this
timer = setTimeout(() => {
fn.apply(context, arg)
           // 或使用 clearTimeout(timer),清除计时器
timer = null
}, t)
}
}
}

Debounce:在实现输入框联想搜索时,可以等到输入完之后在进行联想搜索,避免频繁发送请求消息造成卡顿
/**
* 防抖函数(只执行最后一次)
*/
function Debounce(fn, t) {
const timer = null return function() {
// 如果计时器已经存在,那么取消此次执行
timer && clearTimeout(timer)
const context = this
const arg = arguments
// 执行计时器
timer = setTimeout(() => {
fn.apply(context, arg)
clearTimeout(timer)
}, t)
}
}

  

上一篇:浅析 JavaScript 的函数节流和去抖


下一篇:python 实践项目 强密码检测