防抖和节流的简单理解

       在开发页面的时候经常会绑定一些不停触发的事件，比如 input 输入事件和 scroll 滚动事件，这些事件，只要触发事件就会在一段时间内连续触发，导致页面负载家中，影响体验，所以我们不希望这些事件在一段时间内不停的做一些重复而且毫无意义的操作，这时我们需要用 防抖和节流限制这些事件的调用频率，并且不影响体验。

 

防抖(debounce)

       当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

//可以在控制台输出下面的代码
window.onresize = ()=> {
        console.log('onresize');
    };

可以看到当我们改变浏览器窗口的大小时，打印台会不停的输出，这种情况并不是我们需要的

//防抖代码
function throttle(method,context){
            clearTimeout(method.timer)
            method.timer = setTimeout(function(){
                method.call(context)
            },500)
  
//这时我们在调用会发现事件不会被连续的调用了

节流(throttle)

        当持续触发事件时，保证一定时间段内只调用一次事件处理函数。例如：水龙头，我们可以控制水龙头的阀门让其流淌的大小可以改变。

    hInput () {
      const dt = Date.now() // 获取当前时间戳 ms为单位
      if (dt - this.startTime > 500) {
        this.doAjax()
        this.startTime = dt
      } else {
        console.log('当前的时间戳是', dt, '距离上一次执行不够500ms,所以不执行')
      }
    },
    async doAjax () {
      if (this.keyword === '') {
        this.suggestions = []
        return
      }

      try {
        const res = await getSuggestion(this.keyword)
        // console.log(res)
        this.suggestions = res.data.data.options
      } catch (err) {
        console.log(err)
      }
    }

防抖和节流的区别

节流：是确保函数特定的时间内至多执行一次，限制调用的时间间隔
防抖：是函数在特定的时间内，不能再次触发，一旦触发，就要重新计时