js基础之防抖和节流

前言

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

一、防抖

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
场景：登录时候，避免用户重复点击登录按钮；调整窗口大小时候resize；文本编辑器，一秒后进行保存

代码

//css代码
  div {
        background-color: rgb(196, 189, 189);
        height: 500px;
        font-size: 50px;
        text-align: center;
      }
 //html代码
    <div></div>

 var div = document.querySelector('div')
      let num = 0,
        timer
      div.onmousemove = function () {
        if (timer) {clearTimeout(timer)}
        timer = setTimeout(() => {
          this.innerHTML = num++
        }, 1000)
      }

二、节流

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
场景：scroll事件；input搜索展示下拉框时候（也可以做防抖）

代码

//css代码
  div {
        background-color: rgb(196, 189, 189);
        height: 500px;
        font-size: 50px;
        text-align: center;
      }
 //html代码
    <div></div>

 var div = document.querySelector('div')
      let num = 0,
        pre = 0,
        timer
      div.onmousemove = function () {
        let now = Date.now()
        if (now - pre > 1000) {
          this.innerHTML = num++
          pre = now
        }
      }

链接: https://www.jianshu.com/p/c8b86b09daf0.