节流-throttle的两种实现方法

Wu_hello_mi

已于 2023-04-01 16:37:59 修改

阅读量609

点赞数

分类专栏： js 文章标签： javascript

于 2023-04-01 10:42:26 首次发布

本文链接：https://blog.csdn.net/qq_51387458/article/details/129893286

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

防抖和节流的区别：

防抖：只执行最后一次

节流：只执行第一次

什么是节流？

节流是指单位时间内，如果频繁触发事件，只执行一次。

例子：王者荣耀技能冷却，冷却时间内点击技能不会有作用。

使用场景：鼠标移动mousemove，页面尺寸缩放resize，滚动条滚动scroll等。

案例

目标效果：鼠标在盒子上移动，不管移动多少次，每隔500ms才加1。

方法1：lodash库的_.throttle（函数，时间）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = i++
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    box.addEventListener('mousemove', _.throttle(mouseMove, 500))


  </script>
</body>

</html>

法2：手写节流函数

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        const box = document.querySelector('.box')
        let i = 1  // 让这个变量++
        // 鼠标移动函数
        function mouseMove() {
            box.innerHTML = i++
        }
        // 节流的核心就是利用定时器来实现
        // 1.声明一个定时器变量
        // 2.当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新的定时器
        // 3.如果没有定时器就开启新的定时器,存到变量里面
        // 3.1定时器里面调用执行的函数
        // 3.2定时器里面要把定时器清空
        function throttle(fn, t) {
            let timer = null
            return function () {
                if (!timer) {
                    timer = setTimeout(function () {
                        fn()
                        // 清空定时器
                        timer = null
                    }, t)

                }

            }
        }
        box.addEventListener('mousemove', throttle(mouseMove, 3000))


    </script>
</body>

</html>

案例：

打开页面可以记录上一次视频播放位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="referrer" content="never" />
  <title>综合案例</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    .container {
      width: 1200px;
      margin: 0 auto;
    }

    .video video {
      width: 100%;
      padding: 20px 0;
    }

    .elevator {
      position: fixed;
      top: 280px;
      right: 20px;
      z-index: 999;
      background: #fff;
      border: 1px solid #e4e4e4;
      width: 60px;
    }

    .elevator a {
      display: block;
      padding: 10px;
      text-decoration: none;
      text-align: center;
      color: #999;
    }

    .elevator a.active {
      color: #1286ff;
    }

    .outline {
      padding-bottom: 300px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">
      <a href="http://pip.itcast.cn">
        <img src="https://pip.itcast.cn/img/logo_v3.29b9ba72.png" alt="" />
      </a>
    </div>
    <div class="video">
      <video src="https://v.itheima.net/LapADhV6.mp4" controls></video>
    </div>
    <div class="elevator">
      <a href="javascript:;" data-ref="video">视频介绍</a>
      <a href="javascript:;" data-ref="intro">课程简介</a>
      <a href="javascript:;" data-ref="outline">评论列表</a>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <script>
    // 1. 获取元素  要对视频进行操作
    const video = document.querySelector('video')
    video.ontimeupdate = _.throttle(() => {
      // console.log(video.currentTime) 获得当前的视频时间
      // 把当前的时间存储到本地存储
      localStorage.setItem('currentTime', video.currentTime)
    }, 1000)

    // 打开页面触发事件，就从本地存储里面取出记录的时间， 赋值给  video.currentTime
    video.onloadeddata = () => {
      // console.log(111)
      video.currentTime = localStorage.getItem('currentTime') || 0
    }
  </script>
</body>

</html>

参考：黑马教程

Wu_hello_mi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
节流-throttle的两种实现方法

防抖和节流的区别：防抖：只执行最后一次节流：只执行第一次什么是节流？节流是指单位时间内，如果频繁触发事件，只执行一次。例子：王者荣耀技能冷却，冷却时间内点击技能不会有作用。使用场景：鼠标移动mousemove，页面尺寸缩放resize，滚动条滚动scroll等。案例目标效果：鼠标在盒子上移动，不管移动多少次，每隔500ms才加1。方法1：lodash库的_.throttle（函数，时间）<!DOCTYPE html>&l
复制链接

扫一扫