js定時器關閉，js定時器中止，一次關閉全部正在運行的定時器，自定義函數clearIntervals()一次關閉全部正在運行的定時器

時間 2019-11-24

標籤定時器關閉中止一次全部正在運行自定義函數 clearintervals 欄目 JavaScript 简体版

原文原文鏈接

js定時器關閉，一次關閉全部正在運行的定時器，自定義函數clearIntervals()一次關閉全部正在運行的定時器，原理：利用數組存儲定時器id，而後遍歷數組，關閉定時器

附上頁面的截圖，代碼在截圖下，想看效果就本身複製下邊的代碼，保存個頁面看吧：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearIntervals()一次關閉全部定時器</title>
</head>
<body>
<div>下面有三個定時器以不同的時間間隔輸出不一樣內容</div><br><br>
<input type='button' value='輸出「liu」初始一秒4次' >
<input type="button" value="輸出「jin」初始一秒2次">
<input type="button" value="輸出「yu」初始一秒1次">
<button id='clear' style='margin-left:50px;'>清除全部定時器</button>
<div id="div1"></div>

<script type="text/javascript">

   var oDiv = document.getElementById('div1');
   var aInput = document.getElementsByTagName('input');
   var oBtn = document.getElementById('clear');
   var arr = [];
   var txt = '';
   //每次生成的定時器都單獨有一個數組裏的位置，避免了衝突
   aInput[0].onclick=function(){
       arr.push(setInterval(liu, 250));
   }
   aInput[1].onclick=function(){
       arr.push(setInterval(jin, 500));
   }
   aInput[2].onclick=function(){
       arr.push(setInterval(yu, 1000));
   }
   //調用自定義函數用一個for循環關閉數組中存儲的全部定時器；
   oBtn.onclick=function(){
       clearIntervals(arr);
   }

   function liu(){
       txt = txt.concat(' Liu')
       oDiv.innerHTML=txt;
       return txt;
   }
   function jin(){
       txt = txt.concat(' Jin')
       oDiv.innerHTML=txt;
       return txt;
   }
   function yu(){
       txt = txt.concat(' Yu')
       oDiv.innerHTML=txt;
       return txt;
   }
   //原理用一個數組來保存全部定時器的id
   function clearIntervals(array){
       for (var i = array.length - 1; i >= 0; i--) {
           // if (typeof array[i] !== 'undefined') {
               clearInterval(array[i]);
           // };
       };
   }

</script>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。