节流综合案例

最新推荐文章于 2024-05-14 15:41:22 发布

learn 11233466

最新推荐文章于 2024-05-14 15:41:22 发布

阅读量91

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52005267/article/details/131056790

版权

在这里插入图片描述

输出：null

节流案例：

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

    const video = document.querySelector('video')
    // 节流
    // throttle函数第一个参数可以改成箭头函数
    video.ontimeupdate = _.throttle(function(){
      localStorage.setItem('currentTime',video.currentTime)
      // 把当前视频观看位置（时间）存入本地存储 一秒存一次
    },1000)

    // onloadeddata页面一打开就触发 视频跳转到之前观看的位置（可能之前没播放过，本地中没有currentTime,得到的值为null（不合理）,利用逻辑中断，设置为0s）
    video.onloadeddata = ()=>{
      video.currentTime=localStorage.getItem('currentTime') || 0
    }
    // // 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>