setTimeout 和 setInterval 总结

最新推荐文章于 2021-02-22 02:04:07 发布

stuShan

最新推荐文章于 2021-02-22 02:04:07 发布

阅读量1.3k

点赞数 1

分类专栏： Javascript 文章标签：周期操作延时操作

本文链接：https://blog.csdn.net/stuShan/article/details/51033784

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这里写图片描述

实例一：定时重发验证码

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">

    window.onload=function(){
        var send=document.getElementById('send'),
            times=60,
            timer=null;
        send.onclick=function(){
          // 计时开始 
         send.disabled = 'disabled';

          setTimeout(function(){
          send.disabled = null;   
          }, 1000*times);

          if(timer){
            clearTimeout(timer);
            timer=null;
          }
        } 
    }
    </script>
</head>
<body>
    <input type="button" id="send" value="发送验证码">
</body>
</html>

实例二：tab 选项卡延时切换

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}

window.onload=function(){
  // 标签的索引
  var index=0;
  var timer=null;

  var lis=$('notice-tit').getElementsByTagName('li'),
      divs=$('notice-con').getElementsByTagName('div');

  if(lis.length!=divs.length) return;

  // 遍历所有的页签
  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].onmouseover=function(){
      // 用that这个变量来引用当前滑过的li
      var that=this;
      // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
      if(timer){
        clearTimeout(timer);
        timer=null;
      }
      // 延迟半秒执行
      timer=window.setTimeout(function(){
        for(var j=0;j<lis.length;j++){
          lis[j].className='';
          divs[j].style.display='none';
        }
        lis[that.id].className='select';
        divs[that.id].style.display='block';
      },500);
    }
  }
}

实例三：自动切换的tab选项卡切换效果

function $(id){
  return typeof id==='string'?document.getElementById(id):id;
}

window.onload=tab;

function tab(){
  // 当前高亮显示的页签的索引
  var index=0;
  var timer=null;

  // 获取所有的页签和要切换的内容
  var lis=$('notice-tit').getElementsByTagName('li');
  var divs=$('notice-con').getElementsByTagName('div');
  // 遍历每一个页签且给他们绑定事件
  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].onmouseover=function(){
      clearInterval(timer);
      changeOption(this.id);
    }
    lis[i].onmouseout=function(){  
      timer=setInterval(autoPlay,2000);    
    }
  }

  /**
  消除 timer
  if(timer){
    clearInterval(timer);
    timer=null;
  } 
  添加定时器，改变当前高亮的索引
  timer=setInterval(autoPlay,2000);
  **/

  function autoPlay(){
      index++;
      if(index>=lis.length){
         index=0;
      }
      changeOption(index);
  }

  function changeOption(curIndex){
    for(var j=0;j<lis.length;j++){
       lis[j].className='';
       divs[j].style.display='none';
    }
    // 高亮显示当前页签
    lis[curIndex].className='select';
    divs[curIndex].style.display='block';
    index=curIndex;
  }
}

实例四：图片轮播

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  height: 170px;
  width: 490px;
  margin: 60px auto;
  overflow: hidden;
  position: relative;
  margin: 100px auto;
}

.wrap ul {
  position: absolute;
}

.wrap ul li {
  height: 170px;
}

.wrap ol {
  position: absolute;
  right: 5px;
  bottom: 10px;
}

.wrap ol li {
  height: 20px;
  width: 20px;
  background: #ccc;
  border: solid 1px #666;
  margin-left: 5px;
  color: #000;
  float: left;
  line-height: center;
  text-align: center;
  cursor: pointer;
}

.wrap ol .on {
  background: #E97305;
  color: #fff;
}
</style>
<script type="text/javascript">
  window.onload = function() {
    var wrap = document.getElementById('wrap'), 
      pic = document.getElementById('pic'), 
      images = pic.getElementsByTagName("li");
      list = document.getElementById('list').getElementsByTagName('li'),
      index = 0, 
      timer = null;

    // 定义并调用自动播放函数
    function autoPlay() {
      index++;
      if (index >= list.length) {
        index = 0;
      }
      changeImage(index);
    }
    // 定义图片切换函数
     function changeImage(curIndex) {
      for (var j = 0; j < list.length; j++) {
        list[j].className = '';
        images[j].style.display = 'none';
      }
      // 高亮显示当前页签
      list[curIndex].className = 'on';
      images[curIndex].style.display = 'block';
      index = curIndex; //这是为了预防 onmouseover-out- 之后不能正确调到下一个的措施
    }

    // 鼠标划过整个容器时停止自动播放
  wrap.onmouseover = function (){
      clearInterval(timer);
    }
    // 鼠标离开整个容器时继续播放至下一张
  wrap.onmouseout = function(){
      //changeImage(index++);
      timer = setInterval(autoPlay, 500);
    }
    // 遍历所有数字导航实现划过切换至对应的图片
    for (var i = 0; i < list.length; i++) {
      list[i].id = +i;
      list[i].onmouseover = function (){
        changeImage(this.id);
        clearInterval(timer);
      }
    };
    // 添加定时器，改变当前高亮的索引
   timer = setInterval(autoPlay, 2000);


  }
</script>
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img
        src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img
        src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img
        src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img
        src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img
        src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
  </div>
</body>
</html>