防抖和节流

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

通常在有频繁触发的事件发生时，比如（resize、scroll、mousedown、mousemove、keyup、keydown......），会降低浏览器性能，甚至造成卡顿，我们可以通过防抖（debounce）和节流（throttle）两种方式来解决这个问题。

防抖

• 原理：

  防抖就是防止抖动，当有频繁触发的事件时，在每次触发时等待一定时间（time）之后在执行，如果在time时间内，该事件重新被触发，则重新计算时间。

  eg：在搜索框中，为了提高效率和用户体验，我们一般情况下会在用户输入完成后等待几秒钟出现商品提示选项，而不是输入每一个字母或汉字之后都会请求数据并展示提示商品。

• 特点

  • 一直触发该事件则不执行
  • 最后一次触发完成后隔一段时间执行

//创建一个变量存放定时器
let timer = null
function debounce（） {
    //清除定时器
    clearTimerout(timer)
    //3秒钟后执行代码
    timer = setTimeout(function() {
        //要操作的代码
    }，3000)
}

节流

• 原理：

  节流就是节约流量，当有频繁触发的时间时，规定了在一定时间（time）之内，被频繁出发的事件只执行一次，如果在该时间内事件被重复执行，也只在到了规定的time后执行一次。

  eg：监控鼠标滚动到一定高度时展示按钮，不需要在鼠标每次滚动时都判断，可以在一定时间内获取一次当前鼠标滚动高度。

• 特点

  • 一直触发事件在一定时间内不会多次执行
  • 到了规定的事件或者条件才会执行

//设置变量存放函数执行状态
let flag = true
function throttle() {
    if(!flag) return
    flag = false
    setTimeout(function() {
        //要操作的代码
        flag = true
    },3000)
}

总结

根据不同的需求，选择合适的方法来满足要求并提升性能。