【js】简单理解节流与防抖，搜索框的场景

在输入框输入时，要搜索某个字符串，基于性能考虑，肯定不能用户没输入一个字符就发送一次搜索请求，一种方法就是等待用户停止输入，比如过了500ms用户都没有再输入，那么就搜索此时的字符串，这就是防抖；节流比防抖宽松一些，比如我们希望给用户一些搜索提示，所以在用户输入过程中，没过500ms就查询一次相关字符串，这就是节流。

节流

防抖的实现思路：每次触发事件时都取消之前的延时调用方法：

var timer = null

    function input1 () {

      clearTimeout(timer)

      timer = setTimeout(function () {

        // ajax()

        console.log(document.getElementById('input1').value)

      }, 500)

    }

防抖

节流的实现思路：每次触发事件时都判断当前是否有等待执行的延时函数：

var flg = false

    function input2 () {

      if (flg) {

        return false

      }

      flg = true

      setTimeout(function () {

        // ajax()

        console.log(document.getElementById('input2').value)

        flg = false

      }, 500)

    }