05.JavaScript（防抖节流、视频播放定位上次位置）

最新推荐文章于 2024-07-14 15:36:23 发布

清梦压星河_Ciao

最新推荐文章于 2024-07-14 15:36:23 发布

阅读量215

点赞数

分类专栏：前端文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/m0_53951384/article/details/134048069

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章介绍了防抖（debounce）和节流（throttle）两种技术，如何在处理大量DOM操作时提高性能。通过JavaScript示例展示了如何在鼠标移动事件和视频播放时应用这两种技术，以及使用lodash库的便捷写法。同时，还涉及到了视频播放定位的实现方法。

摘要由CSDN通过智能技术生成

防抖节流

防抖（debounce）
所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

节流案例

<style>
    .box {
      width: 500px;
      height: 500px;
      background-color: #ccc;
      color: #fff;
      text-align: center;
      font-size: 100px;
    }
</style>
<script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }
    // console.log(mouseMove)
    // 节流函数 throttle 
    function throttle(fn, t) {
      // 起始时间
      let startTime = 0
      return function () {
        // 得到当前的时间
        let now = Date.now()
        // 判断如果大于等于 500 采取调用函数
        if (now - startTime >= t) {
          // 调用函数
          fn()
          // 起始的时间 = 现在的时间   写在调用函数的下面 
          startTime = now
        }
      }
    }
    box.addEventListener('mousemove', throttle(mouseMove, 500))

    // throttle(mouseMove, 500) === function () { console.log(1) }


    // box.addEventListener('mousemove', function () {
    //   // 得到当前的时间
    //   let now = Date.now()
    //   // 判断如果大于等于 500 采取调用函数
    //   if (now - startTime >= t) {
    //     // 调用函数
    //     fn()
    //     // 起始的时间 = 现在的时间   写在调用函数的下面
    //     startTime = now
    //   }
    // })

  </script>
<body>
  <div class="box"></div>
</body>

</html>

节流案例

<style>
   .box {
     width: 500px;
     height: 500px;
     background-color: #ccc;
     color: #fff;
     text-align: center;
     font-size: 100px;
   }
</style>
<script>
  const box = document.querySelector('.box')
  let i = 1  // 让这个变量++
  // 鼠标移动函数
  function mouseMove() {
    box.innerHTML = ++i
    // 如果里面存在大量操作 dom 的情况，可能会卡顿
  }
  // 防抖函数
  function debounce(fn, t) {
    let timeId
    return function () {
      // 如果有定时器就清除
      if (timeId) clearTimeout(timeId)
      // 开启定时器 200
      timeId = setTimeout(function () {
        fn()
      }, t)
    }
  }
  // box.addEventListener('mousemove', mouseMove)
  box.addEventListener('mousemove', debounce(mouseMove, 200))
</script>

<body>
  <div class="box"></div>
</body>

上面两个案例的主要区别是第一个案例连续移动鼠标会在每500毫秒内会触发一次事件，而第二个案例连续移动鼠标，只会触发一次事件。

使用lodash写法

<style>
   .box {
     width: 500px;
     height: 500px;
     background-color: #ccc;
     color: #fff;
     text-align: center;
     font-size: 100px;
   }
</style>
<script src="./lodash.min.js"></script>
  <script>
    const box = document.querySelector('.box')
    let i = 1  // 让这个变量++
    // 鼠标移动函数
    function mouseMove() {
      box.innerHTML = ++i
      // 如果里面存在大量操作 dom 的情况，可能会卡顿
    }

    // box.addEventListener('mousemove', mouseMove)
    // lodash 节流写法
    // box.addEventListener('mousemove', _.throttle(mouseMove, 500))
    // lodash 防抖的写法
    box.addEventListener('mousemove', _.debounce(mouseMove, 500))
</script>

<body>
  <div class="box"></div>
</body>

视频播放定位

我们平时看视频退出后再看视频会自动定位到我们上次看到的位置，这种体验就很好。那该如何实现播放时间记录呢？视频是按秒播放的，所以可以每隔一秒就记录一下视频的已播放时间，并且记录到本地。下次进到该页面自动获取记录跳转到视频的播放进度即可。

<!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>

清梦压星河_Ciao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05.JavaScript（防抖节流、视频播放定位上次位置）

/ 打开页面触发事件，就从本地存储里面取出记录的时间，赋值给 video.currentTime。// // 起始的时间 = 现在的时间写在调用函数的下面。// 起始的时间 = 现在的时间写在调用函数的下面。// 如果里面存在大量操作 dom 的情况，可能会卡顿。// // 判断如果大于等于 500 采取调用函数。// 如果里面存在大量操作 dom 的情况，可能会卡顿。// 把当前的时间存储到本地存储。// // 得到当前的时间。// // 调用函数。
复制链接

扫一扫