js 节流 throttle

最新推荐文章于 2024-07-20 14:49:34 发布

陈佳兵001

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量112

点赞数

文章标签： js javascript html

本文链接：https://blog.csdn.net/qq_35603474/article/details/103699200

版权

javascript 基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #drag {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
  }
</style>
<body>
  <div>练习</div>
  <div draggable="true" id="drag"></div>
  <!-- <script src="./index.js"></script> -->
  <script>
    function throttle(fn, delay = 100) {
      let timer = null
      return function () {
        if(timer) {
          return
        }
        timer = setTimeout(() => {
          fn.apply(this, arguments)
          timer = null
        }, delay)
      }
    }
    $drag = document.getElementById('drag')
    $drag.addEventListener('drag', throttle(function(e) {
      console.log(e.offsetX, e.offsetY)
    }))
  </script>
</body>
</html>

陈佳兵001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 节流 throttle

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
复制链接

扫一扫