JS 节流

OGoodness

已于 2022-07-10 22:11:27 修改

阅读量489

点赞数

分类专栏： JS 文章标签： javascript css3 前端

于 2022-06-20 10:13:35 首次发布

本文链接：https://blog.csdn.net/qq_46275230/article/details/125366850

版权

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JS 节流

说明:

1.对于高频触发的监听事件函数,实现对于触发次数的间接限制,从而降低触发次数.

2.关键点在于控制时间周期内,阻止触发内容,即上锁;在时间周期外解锁,触发内容。

3.主要是对间隔时间限制,在规定时间内,阻止触发事件内指定程序或默认抛弃

4.三种实现节流方式:时间戳版,定时器版,束流版

5.相当于"技能冷却时间"

初始化代码

<style>
    .wrap {
      margin: 20px auto;

      width: 400px;
      height: 250px;
      box-shadow: 0 0 4px #333;

      color: #08d;
      font-size: 40px;
      font-weight: 800;

      display: flex;
      justify-content: center;
      align-items: center;

      cursor: pointer
    }
</style>
<body>
  <div class="wrap">0</div>
</body>

请添加图片描述

时间戳版

<script>
//时间戳版
    let oWrap = document.querySelector(".wrap")
    let count = 0
    let time = 0
    //时间戳版
    oWrap.addEventListener("mousemove", function () {
      if (Date.now() - time < 1000) {
        return false;
      }
      time = Date.now()
      write()
    }, false)
    
    function write() {
      oWrap.innerText = count++
    }
</script>

定时器版

//定时器版
	let oWrap = document.querySelector(".wrap")
	let count = 0
    let lock = false
    oWrap.addEventListener("mousemove", function () {
      if (lock) {
        return true
      }
      lock = true
      write()

      //控制再次触发时间间隔
      setTimeout(() => {
        lock = false
      }, 1000);
    }, false)

    function write() {
      oWrap.innerText = count++
    }

束流版

 //束流版
 	let oWrap = document.querySelector(".wrap")
    let count = 0
    let num = 0
    oWrap.addEventListener("mousemove", function () {
      num++
      if (num % 100 !== 0) {
        return false;
      }
      write()
    }, false)
    
    function write() {
      oWrap.innerText = count++
    }