setInterval與setTimeout的用法
阿新 • • 發佈：2018-11-28
setInterval與setTimeout的用法
定時器是我們在工作中經常用到的一些方法，比如輪播圖、彈窗、倒計時等場景，定時器是window的方法，所以this指向的一定是window（這是需要注意的)。
一個普通的倒計時方法：
<!--普通定時器倒計時-->
<div class="timer"></div>
<script>
window.onload=function() {
var div = document.getElementsByClassName('timer')[0];
//定義一個時間差函式 注意，當倒計時為最後1秒時，就要清除定時器，否則定時器會多走一次。
一個普通的彈出動畫定時器案例：
<style>
.animate {
width: 180px;
height: 200px;
background: #07bbff;
position: fixed;
right: 0;
bottom: -200px;
}
</style>
<body>
<div class="animate">
<span onclick="hide()">關閉</span>
</div>
<script>
//思路：出現時一個定時器，隱藏時一個定時器，過5秒後一個週期定時器
var div=document.getElementsByClassName('animate')[0];
var span=div.getElementsByTagName('span')[0];
//獲取div盒子的外聯樣式方法：
var cssStyle=window.getComputedStyle(div,null);
//出現事件
function moveUp(){
//2s內完成 間隔時間為100ms,則需要20次，每次移動10px
//獲取div的bottom並轉為數字，用於計算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=0){
bottom+=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
}
}
//隱藏事件
function moveDown(){
//2s內完成 間隔時間為100ms,則需要20次，每次移動10px
//獲取div的bottom並轉為數字，用於計算
var bottom=parseInt(cssStyle.bottom);
if(bottom!=-200){
bottom-=10;
div.style.bottom=bottom+'px';
}else{
clearInterval(timer);
timer=null;
//消失後5秒在此出現
timer2=setTimeout(function(){
timer=setInterval(moveUp,100);
},5000);
}
}
var timer=null;
var timer2=null;
//頁面載入完成時出現
window.onload=function(){
timer=setInterval(mouveUp,100);
}
//點選時消失
function hide(){
//做一個判斷，避免在出現時進行點選,同時阻止事件冒泡
event.stopPropagation();
var bottom=parseInt(cssStyle.bottom);
if(bottom==0){
timer=setInterval(moveDown,100);
}
}
</script>
</body>
一個驗證碼定時器：
<button id="btn" onclick="timeDown()">點選獲取驗證碼</button>
<script>
var btn=document.getElementById('btn');
//倒計時時間
var sec=30;
function time(){
//消除定時器的界定都是1秒的時候
if(sec>1){
sec--;
sec=sec<10?'0'+sec:sec;
btn.innerHTML=sec+'s後重新獲取';
//禁止倒計時時點選
btn.removeAttribute('onclick');
btn.style.cursor='not-allowed';
}else{
clearInterval(timer);
timer=null;
//重新倒計時
btn.setAttribute('onclick','timeDown()');
btn.style.cursor='pointer';
sec=30;
}
}
var timer=null;
//點選時倒計時
function timeDown(){
timer=setInterval(time,1000);
}
</script>
注意，在使用onclick屬性時需要防止事件冒泡！！