1. <body>
  2.     <div id="app" draggable="true">
  3.        可拖拽
  4.     </div>
  5.     <script>
  6.        //单位时间以内,只触发一次，如果在这个单位时间之内多次触发,最终也只会执行一次
  7.        //节流:无论你拖拽一个元素多块,事件都会没间隔一毫秒触发一次
  8.        let timer =null;
  9.        const app=document.querySelector('#app')
  10.        app.addEventListener('drag',function(e){
  11.            if(timer){
  12.                return
  13.            }
  14.           timer=setTimeout(()=>{
  15.                console.log(e.offsetX,e.offsetY);
  16.                timer=null
  17.            },500)
  18.        })
  20.     </script>
  21. </body>

闭包封装函数节流

  1.     <div id="app" draggable="true">
  2.         可拖拽
  3.      </div>
  4.      <script>
  5.         //单位时间以内,只触发一次，如果在这个单位时间之内多次触发,最终也只会执行一次
  6.         //节流:无论你拖拽一个元素多块,事件都会没间隔一毫秒触发一次
  7.         let timer =null;
  8.         const app=document.querySelector('#app')
  9.         app.addEventListener('drag',throttle(function(e){
  10.             console.log(e.offsetX,e.offsetY);
  11.         }))
  12.         function throttle(fn,delay=500){
  13.             let timer=null;
  14.             return function(){
  15.                 if(timer){
  16.                     return
  17.                 }
  18.                 timer =setTimeout(()=>{
  19.                     //arguments 是函数内部的一个对象,接受函数传递过来
  20.                     console.log(arguments);
  21.                             fn.apply(this,arguments);
  22.                             timer=null
  23.                 },delay)
  24.             }
  25.         }
  27.      </script>