防抖&节流

最新推荐文章于 2024-11-08 17:24:22 发布

楚城相拥

最新推荐文章于 2024-11-08 17:24:22 发布

阅读量295

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_60020621/article/details/122546360

版权

防抖

就是设置一个事件触发的间隔时间，如果在这个时间内再次触发改事件，则重新计时，事件只执行最后一次。

// 定义一个全局变量，方便删除定时器
var timer = null 

//在触发点击事件事件（keyup）时
$('#ipt').on('keyup', function() { 

//先清除之前定时器。重新计时
 clearTimeout(timer)

 //用定时器实现防抖
  timer = setTimeout(function() {
     console.log(111)
     }, 500)
 })

节流

设置一个间隔时间，让一个事件只能隔一段时间，才触发一次。

这里是让一个图片跟随鼠标移动

//样式部分
 <style>
    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #angel {
      position: absolute;
    }
  </style>

<body>
  <img src="./angel.gif" alt="" id="angel" />

  <script>
    $(function () {
      // 节流阀，null关
      var timer = null
      var angel = $('#angel')

      //鼠标在页面滑动时，执行事件
      $(document).on('mousemove', function (e) {

        // 判断节流阀是否开着
        if (!timer) {

          //用定时器设置间隔时间
          timer = setTimeout(() => {

            //控制图片定位的位置，实现跟随
            $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px')

            //事件结束要把节流阀重新关上
            timer = null

          }, 100);//如果感觉卡顿可以把间隔时间调小。
        }
      })
    })
  </script>
</body>