【节流】页面中打开视频仍保持在之前看到的进度条的位置是怎么做到的？当我们在页面中打开一个视频时，可能还没有看完就因为各种

一、效果描述

当我们在页面中打开一个视频时，可能还没有看完就因为各种原因退出了。但是当我们回过头来再打开时发现，进度条仍然停留在我们上次所看到的那个位置上。这种效果就是今天这篇文章要讲的节流

二、概念

节流：当在某一时间内频繁触发某一事件，在这段设置好的时间内，该事件至多执行一次 example:王者荣耀的英雄技能冷却--当你点击完技能后，不论你再点击多少次，只有等待设定的秒数后才能重新使用

三、节流实现逻辑

首先声明一个变量用作定时器的名字，方便后面清除
然后开启定时器之前，先判断页面中是否已经有定时器
有定时器则不做任何操作；没有定时器，则开启定时器，在定时器结束后清除

四、案例实现逻辑

利用localStorage中的setItem方法，以及节流函数(JS库lodash中的_.throttle()函数),每隔一秒存储一下视频当前播放时间
然后在页面刷新时，将存储的事件再赋值给视频的currentTime属性

五、手写throttle()节流函数

虽然在正式开发中，直接用lodash库中的节流函数非常方便，但是底层逻辑还是要懂

    function throttle(fn,t){
        let timer = null
        return function(){
            if(!timer){
                timer = setTimeout(function(
                    fn()
                    timer = null //定时器中不能用clearTimeout,不起作用
                ),t)
            }
        }
    }
    throttle('函数参数'，时间)

//由于节流函数要传参数，所以加括号，但是js机制会判断为立即调用，在页面刚加载完就会调用。所以这里采用了闭包的写法

六、案例JS部分

    //1.首先获取video元素
    const video = document.querySelector('video')
    //2.绑定事件，每隔1s存储一下当前的时间
    video.ontimeUpdate = function(){
        localStorage.setItem('currentTime',video.currentTime)
    }
    //3.在页面加载刷新的时候将存储的时间赋值给video的currentTime属性
    video.onloadeddata = () =>{
        video.currentTime = localStorage.getItem('currentTime')
    }

七、练习素材

    <!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>
  
   </script>
</body>

</html>

The End

祝所有在学习的小伙伴们都能成功上岸！