到 目 前 為 止, 只 要 頁(yè) 面 一 加 載, 就 會(huì) 運(yùn) 行 頁(yè) 面 中 的JavaScript 代碼,只有包含了對(duì) alert 或 confirm 這樣的函數(shù)調(diào)用的時(shí)候,程序才會(huì)暫停。但是,我們并不是總希望頁(yè)面一加載就運(yùn)行所有的代碼,如果想要讓一些代碼延遲運(yùn)行或者用戶做了某些響應(yīng)動(dòng)作之后才運(yùn)行,該怎么辦呢?
用setTimeout函數(shù)延時(shí)代碼
這個(gè)函數(shù)接受兩個(gè)參數(shù):分別是一段時(shí)間之后要調(diào)用的函數(shù)以及所要等待的時(shí)間(毫秒)。
如下就是一個(gè)最簡(jiǎn)單的例子，頁(yè)面加載完成后3秒才彈出一個(gè)提示框
<body>
<script type="text/javascript">
var timeUp=function(){
alert("Time's up!");
};
setTimeout(timeUp,3000);
</script>
</body>
注意：
上面的例子仍然是頁(yè)面一加載就運(yùn)行所有的代碼。
調(diào) 用 setTimeout 的 返 回 值表示該方法當(dāng)前被調(diào)用的次數(shù)，第一次調(diào)用返回值是1，第二次調(diào)用返回值是2，以此類推。
下面的效果是一加載頁(yè)面就執(zhí)行全部js代碼，先彈出提示框（顯示值為1），點(diǎn)擊“OK”后再?gòu)棾鎏崾究颍ㄖ禐?），第二個(gè)提示框點(diǎn)擊“OK”之后再過(guò)3秒之后彈出“Time's up!”，前面一個(gè)“Time's up!”點(diǎn)擊“OK”之后再過(guò)3秒彈出“Time's up!”。
首先，頁(yè)面所有代碼都是一加載完代碼就得到執(zhí)行，setTimeout方法也是里面得到執(zhí)行。（如果理解為3秒后才執(zhí)行該方法，那么就是3秒后執(zhí)行該方法然后接著等待3秒，總共得等6秒了）；其次，我們只有點(diǎn)擊每個(gè)彈出框之后，后面的彈窗代碼才會(huì)開(kāi)始執(zhí)行（所以我們?cè)诘谝粋€(gè)彈窗不點(diǎn)擊“OK”，等待3秒后也不會(huì)出現(xiàn)"Time's up!"彈窗）
<body>
<script type="text/javascript">
var timeUp=function(){
alert("Time's up!");
};
var result=setTimeout(timeUp,3000);
var result2=setTimeout(timeUp,3000);
var result3=setTimeout(timeUp,3000);
alert(result);
alert(result3)
</script>
</body>
取消一個(gè)timeout
例如我們使用 setTimeout 函數(shù)創(chuàng)建了一個(gè)延遲函數(shù)調(diào)用之后,可能會(huì)發(fā)現(xiàn)實(shí)際上并不想要調(diào)用該函數(shù)。例如我們?cè)O(shè)置一個(gè)鬧鐘來(lái)提醒做作業(yè),但是作業(yè)已經(jīng)提前完成了,那就想要取消這個(gè)鬧鐘。要取消 timeout,在 setTimeout 返回的timeoutID 上調(diào)用 clearTimeout 函數(shù)。
如下效果就是在4秒后彈窗“Finish homework before alarm,eat dinner..."
<body>
<script type="text/javascript">
var homeworkAlarm = function(){
alert("Begin to do homework now..");
};
var eatDinner = function(){
alert("Finish homework before alarm,eat dinner...");
};
var timeoutId1 = setTimeout(homeworkAlarm,3000);
var timeoutId2 = setTimeout(eatDinner,4000);
clearTimeout(timeoutId1);
</script>
</body>
使用setInterval多次調(diào)用代碼
setInterval 函數(shù)就像 setTimeout 函數(shù)一樣,只不過(guò)它是重復(fù)調(diào)用指定的函數(shù)。接受兩個(gè)參數(shù):分別是想要調(diào)用的函數(shù)和間隔的時(shí)間長(zhǎng)度。
像 setTimeout 返回 timeout ID 一樣,setInterval 會(huì)返回 interval ID,可以使用clearInterval 函數(shù)和這個(gè) interval ID 來(lái)告訴 JavaScript 停止執(zhí)行重復(fù)調(diào)用。
如下例子，標(biāo)題元素每 30 毫秒就會(huì)在屏幕上緩慢地移動(dòng) 1 個(gè)像素直到移動(dòng)了 200 個(gè)像素，然后回到起始點(diǎn),再次開(kāi)始移動(dòng)，不斷重復(fù)該過(guò)程。
使用 offset 方法設(shè)置標(biāo)題距離屏幕左邊緣的距離。
<body>
<h1 id="heading">Rails is going...</h1>
<script type="text/javascript">
var leftOffset = 0;
var moveHeading = function(){
$("#heading").offset({left: leftOffset});
leftOffset++;
if(leftOffset > 200){
leftOffset = 0;
}
};
setInterval(moveHeading,30);
</script>
</body>
如果我們想要恢復(fù)原來(lái)位置之后就停止重復(fù)調(diào)用，可以使用如下代碼：
<body>
<h1 id="heading">Rails is going...</h1>
<script type="text/javascript">
var leftOffset = 0;
var moveHeading = function(){
$("#heading").offset({left: leftOffset});
leftOffset++;
if(leftOffset > 200){
leftOffset = 0;
$("#heading").offset({left: leftOffset});
clearInterval(id);
}
};
var id=setInterval(moveHeading,30);
</script>
</body>
對(duì)單擊做出響應(yīng)
當(dāng)調(diào)用這個(gè)函數(shù)時(shí),
click(clickHandler)的含義是“當(dāng)單擊 h1 元素時(shí),調(diào)用 clickHandler 函數(shù),并且將 event 對(duì)象傳遞給該函數(shù)”。在這個(gè)示例中,單擊處理程序從這個(gè)event 對(duì)象中獲取信息,并且在控制臺(tái)輸出單擊位置的 x 坐標(biāo)和 y 坐標(biāo)。
event 參數(shù)是包含單擊事件相關(guān)信息的一個(gè)對(duì)象，例如單擊的位置pageX，pageY和其他很多事件本身的信息。
<body>
<h1>Learn</h1>
<script type="text/javascript">
var clickHandler=function(event){
alert("Click!"+event.pageX+"---"+event.pageY)
}
var s=document.getElementsByTagName("h1");
s[0].onclick=clickHandler; //注意點(diǎn)擊事件關(guān)鍵字是onclick
</script>
</body>
上面的例子使用jQuery來(lái)寫(xiě)則是(注意點(diǎn)擊事件關(guān)鍵字是click)：
<body>
<h1>Learn</h1>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var clickHandler=function(event){
alert("Click!"+event.pageX+"---"+event.pageY)
}
$("h1").click(clickHandler);
</script>
</body>
鼠標(biāo)移動(dòng)事件
每次鼠標(biāo)移動(dòng)都會(huì)觸發(fā) mousemove 事件。
使用 $("html")選中這個(gè) html 元素,以便當(dāng)鼠標(biāo)在頁(yè)面上任何位置移動(dòng)時(shí)都會(huì)觸發(fā)這個(gè)處理程序。每次用戶移動(dòng)鼠標(biāo),都會(huì)調(diào)用傳遞到 mousemove 后面的括號(hào)中的函數(shù)。效果就是每次移動(dòng)鼠標(biāo),標(biāo)題將會(huì)移動(dòng)到該位置。
<body>
<h1 id="heading">Rails is going...</h1>
<script type="text/javascript">
$("heading").mousemove(function (event){
$("#heading").offset({
left: event.pageX,
top: event.pageY
});
});
</script>
</body>
