十七、节流

什么是节流：单位时间以外,只触发一次，如果在这个单位时间之内多次触发，最终也只会执行一次

比喻：走A-DFN 打枪
    1、射击游戏中 鼠标事件
    2、鼠标的移动距离测算
    3、input  http  搜索联想

节流

节流:无论你拖拽一个元素多快,事件都会每间隔200ms触发一次 
节流可以让函数变得平滑

<div id="app" draggable="true">可拖拽</div>
<script>
  let timer = null;
  const app = document.getElementById("app");
  app.addEventListener("drag",function(e){
    if(timer){
      return
    }
    timer = setTimeout(()=>{
      console.log(e.offsetX,e.offsetY)
      timer = null;
    },500)
  })
</script>

封装节流函数

const app = document.getElementById("app")
app.addEventListener("drag",throttle(function(e){
  console.log(e.offsetY);
}))
function throttle(fn,delay=500){
  let timer = null
  return function(){
    if(timer){
      return
    }
    timer = setTimeout(()=>{
      console.log(arguments);
      fn.apply(this,arguments)
      timer = null
    },delay)
  }
}

节流和搜索

节流一般是使用在搜索框中

# throttle.js
function throttle(fn,delay=500){
    let timer = null
    return function(){
        if(timer){
            return
        }
        timer = setTimeout(()=>{
            fn.apply(this,arguments)
            timer = null
            /* 这里如果不写成null，那么在执行定时器中的回调函数时，如果在按下键盘，就会
            直接清除了，然后向下执行，在执行到这，timer再次被赋值，然后在等待中在按下
            键盘，就又会删除timer，就陷入死循环了;
                而加上timer=null，那么在执行到回调函数时，timer的值就不是定时器的值，就清除不掉正在执行的定时器了 */
        },delay)
    }
    // fn必须是一个function(){},不可以传函数名
}

<div id="app">
  <!-- 事件 -->
  <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <!-- 监听器 -->
</div>
<script>
      new Vue({
      el:"#app",
      data:{
        msg:"hello"
      },
      // wacth属性可以监听data中值的变化
      watch:{
        // 节流
        msg:throttle(function(){
          this.getSearch(this.msg)
        })
      },
      methods: {
        getSearch(val){
          var url = `http://122.112.161.135:3000/search?keywords=${val}`
          console.log(url);
        }  
      },
    })
</script>