手写进度条并设置防抖

最新推荐文章于 2023-12-14 20:45:00 发布

Mathilda91

最新推荐文章于 2023-12-14 20:45:00 发布

阅读量192

点赞数

原文链接：https://juejin.im/post/5bbd9f4ce51d450ea3637956

版权

第一篇小总结。

实现一个进度条（两层div）

效果图：

点击load按钮开始加载进度。

html代码：

这里就很简单，设置两个div，外层的为容器，内层的为进度，通过增加内层div的width来实现进度增加的效果。

<body>
    <div id='container'>
      <div id='progress'>0</div>
    </div>
    <button id='btn' onclick='debounce(move,10000,false)()'>load</button>
</body>
复制代码

CSS代码：

为两个div设置样式，外层无色，内层背景色为green，初始width为0%，之后会通过执行js代码来改变这个宽度。另外，使用line-height使得内层中表示进度的百分比数字垂直居中，使用text-align实现数字水平居中。

#container{
  width:100%;
  border:1px solid black;
  border-radius:5px;
}
#progress{
  width:0%;
  line-height:30px;
  background:green;
  text-align:center;
  border-radius:5px;
}
复制代码

JS代码+防抖函数：

move函数实现了进度条的增加，即改变内层div的width，但是如果反复出发点击事件，进度条会不断的从零开始加载，也就是出现抖动的情况。

所以，加入一个防抖函数debounce，其中immediate可以设置为true或者false来控制是否立即执行一次。

function move(){
  var pro = document.getElementById('progress');
  var width = 0;
  var timer1 = setInterval(go,100);
  function go(){
    if(width<100){
    width++;
    pro.style.width = width + '%';
    pro.innerHTML = width + '%';
    }else{
      clearInterval(timer1);
    }
  }
}
//防抖
var timer = null; //初始定时器
function debounce(move,delay,immediate){
  return function()
   //保存上下文
    var context = this;
    var args = arguments;
    //如果存在定时器，则将还没执行完的定时器消除，对应的延迟的事件也就取消了。
    //但是这里取消事件并没把timer设为null，注意这一点。
    if(timer){clearTimeout(timer);}
    //immediate为true时表示会马上执行一次事件
    if(immediate){
      var doNow = !timer;//初始的timer为null，所以这里为真
      //设置一个定时器，delay时间之后timer为null，就可以重新触发了
      timer = setTimeout(function(){
        timer = null;
      },delay);
      if(doNow){
      move.apply(context,args);
      }
    }else{
      timer = setTimeout(function(){
        move.apply(context,args);
      },delay);
    }
  }
}
复制代码

Mathilda91

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手写进度条并设置防抖

第一篇小总结。实现一个进度条（两层div）效果图：点击load按钮开始加载进度。html代码：这里就很简单，设置两个div，外层的为容器，内层的为进度，通过增加内层div的width来实现进度增加的效果。<body> <div id='container'> <div id='progress'>0</div> ...
复制链接

扫一扫