setTimeout 和 setInterval 總結

實例一：定時重發驗證碼

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

setTimeout 和 setInterval 總結

實例一：定時重發驗證碼

實例二：tab 選項卡延時切換

實例三：自動切換的tab選項卡切換效果

實例四：圖片輪播

歸併算法(java 語言實現)

泛型歸併排序(java 語言實現)

堆排序（java 語言實現）

setTimeout 和 setInterval 總結

適配器模式（java語言實現）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結