JavaScript定時(shí)器

2024-04-27 15:05:43

字體：大中小

供稿：網(wǎng)友

setTimeout:

setTimeout能夠讓某個(gè)函數(shù)在經(jīng)過(guò)一段預(yù)定時(shí)間之后才開(kāi)始執(zhí)行，這個(gè)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)通常是一個(gè)字符串，例如“將要執(zhí)行的函數(shù)名()”；第二個(gè)參數(shù)是數(shù)值，表示經(jīng)過(guò)多少時(shí)間才開(kāi)始執(zhí)行函數(shù)，單位是毫秒。

setTimeout(“function”,interval)

如果想取消定時(shí)器，就必須事先把setTimeout函數(shù)的返回值賦值給一個(gè)變量，用clearTimeout函數(shù)來(lái)取消定時(shí)器，這個(gè)函數(shù)需要一個(gè)參數(shù)，就是保存著setTimeout函數(shù)返回值的變量。

variable=setTimeout(“function”,interval)

clearTimeout(variable)

例如隨便舉例一個(gè)函數(shù)：

movement=setTimeout("moveMessage()",5000);

clearTimeout(movement);

movement變量對(duì)應(yīng)著setTimeout調(diào)用，它是全局變量，聲明它時(shí)未使用var，這意味著可以在任何地方取消定時(shí)器。

如下為一個(gè)簡(jiǎn)單的動(dòng)畫實(shí)例，實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示每個(gè)鏈接的預(yù)覽圖(一張大圖滑動(dòng))：

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<style type="text/CSS">			#slideshow {				width: 100px;				height: 100px;				position: relative;				overflow: hidden;			}						#PReview {				position: absolute;				width: 400px;				height: 100px;			}		</style>	</head>	<body>		<h1>Web Design</h1>		<p>These are the things you should know</p>		<ol id="linklist">			<li>				<a href="structure.html">Structure</a>			</li>			<li>				<a href="presentation.html">Presentation</a>			</li>			<li>				<a href="behavior.html">Behavior</a>			</li>		</ol>		<!--<script type="text/javascript" src="js/moveElement.js"></script>-->		<!--<script type="text/Javascript" src="js/prepareSlidershow.js"></script>-->		<!--<script type="text/javascript" src="js/insertAfter.js"></script>-->		<script type="text/javascript">			window.onload = function() {				prepareSlideshow();			}			function prepareSlideshow() {				var slideshow = document.createElement("div");				slideshow.setAttribute("id", "slideshow");				var preview = document.createElement("img");				preview.setAttribute("src", "img/b90e7bec54e736d12c42ceb69c504fc2d562693e.jpg");				preview.setAttribute("alt", "building blocks of web design");				preview.setAttribute("id", "preview");				slideshow.appendChild(preview);				//取得列表中的所有鏈接				var list = document.getElementById("linklist");				//把預(yù)覽圖放在鏈接后面				insertAfter(slideshow, list);				var links = list.getElementsByTagName("a");				//為mouSEOver事件添加動(dòng)畫效果				links[0].onmouseover = function() {					moveElement("preview", -100, 0, 10);				}				links[1].onmouseover = function() {					moveElement("preview", -200, 0, 10);				}				links[2].onmouseover = function() {					moveElement("preview", -300, 0, 10);				}			}			//封裝動(dòng)畫函數(shù)			function moveElement(elementID, final_x, final_y, interval) {				//elementID表示打算移動(dòng)的元素的ID，final_x表示目的地的左位置，final_y表示目的地的右位置，interval表示停頓時(shí)間				if(!document.getElementById || !document.getElementById(elementID)) return false;				var elem = document.getElementById(elementID);				if(elem.movement) { //清除定時(shí)器					clearTimeout(elem.movement);				}				if(!elem.style.left) {					elem.style.left = "0px";				}				if(!elem.style.top) {					elem.style.top = "0px";				}				//elem.style.left和elem.style.top這兩個(gè)值都是字符串，而進(jìn)行算術(shù)比較操作需要的是數(shù)，不是字符串，需用parseInt()把字符串里的				//數(shù)值提取出來(lái)，如果把一個(gè)以數(shù)字開(kāi)頭的字符串傳遞給parseInt，它將返回一個(gè)數(shù)值。				var xpos = parseInt(elem.style.left);				var ypos = parseInt(elem.style.top);				if(xpos == final_x && ypos == final_y) {					return true;				}				if(xpos < final_x) {					xpos += Math.ceil((final_x - xpos) / 10);				}				if(xpos > final_x) {					xpos -= Math.ceil((xpos - final_x) / 10);				}				if(ypos < final_y) {					ypos += Math.ceil((final_y - ypos) / 10);				}				if(ypos > final_y) {					ypos -= Math.ceil((ypos - final_y) / 10);				}				elem.style.left = xpos + "px";				elem.style.top = ypos + "px";				elem.movement = setTimeout("moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")", interval);			}			//elementID表示字符串，final_x表示數(shù)字，字符串要多加一個(gè)單引號(hào)			function insertAfter(newElement, targetElement) {				var parent = targetElement.parentNode;				if(parent.lastChild == targetElement) {					parent.appendChild(newElement);				} else {					parent.insertBefore(newElement, targetElement.nextSibling);				}			}		</script>	</body></html>