1. <div id="app" draggable="true">
  2.         可拖拽
  3.     </div>
  4.     <script>
  5.         // 单位时间以内只触发一次，
  6.         // 鼠标移动距离测算
  7.         // input  http 搜索
  9.         // 节流：无论你拖拽一个元素多快，时间都会每隔500ms触发一次
  10.         // 节流可以让函数变得平滑
  11.         let timer = null;
  12.         const app = document.getElementById("app");
  13.         app.addEventListener("drag",function(e){
  14.             if(timer){
  15.                 return 
  16.             }
  17.             timer = setTimeout(()=>{
  18.                 console.log(e.offsetX,e.offsetY);
  19.                 timer = null;
  20.             },500)
  21.         })
  22.     </script>

封装函数节流

  1. <body>
  2.     <div id="app" draggable="true">
  3.         可拖拽
  4.     </div>
  5.     <script>
  7.         const app = document.getElementById("app");
  8.         app.addEventListener("drag", throttle(function (e) {
  9.             console.log(e.offsetY);
  10.         }))
  12.         function throttle(fn, delay = 500) {
  13.             let timer = null;
  14.             return function () {
  15.                 if (!timer) {
  16.                     timer = setTimeout(() => {
  17.                         // arguments 是函数内部的一个对象，接收函数传递过来的参数
  18.                         console.log(arguments);
  19.                         fn.apply(this, arguments);
  20.                         timer = null;
  21.                     }, 5000)
  22.                 }
  24.             }
  26.         }
  27.     </script>
  28. </body>