JavaScript定時器

2024-04-27 15:05:43

字體：大中小

來源：轉載

供稿：網友

setTimeout:

setTimeout能夠讓某個函數在經過一段預定時間之后才開始執行，這個函數有兩個參數，第一個參數通常是一個字符串，例如“將要執行的函數名()”；第二個參數是數值，表示經過多少時間才開始執行函數，單位是毫秒。

setTimeout(“function”,interval)

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

variable=setTimeout(“function”,interval)

clearTimeout(variable)

例如隨便舉例一個函數：

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

clearTimeout(movement);

movement變量對應著setTimeout調用，它是全局變量，聲明它時未使用var，這意味著可以在任何地方取消定時器。

如下為一個簡單的動畫實例，實現鼠標經過顯示每個鏈接的預覽圖(一張大圖滑動)：

<!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");				//把預覽圖放在鏈接后面				insertAfter(slideshow, list);				var links = list.getElementsByTagName("a");				//為mouSEOver事件添加動畫效果				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);				}			}			//封裝動畫函數			function moveElement(elementID, final_x, final_y, interval) {				//elementID表示打算移動的元素的ID，final_x表示目的地的左位置，final_y表示目的地的右位置，interval表示停頓時間				if(!document.getElementById || !document.getElementById(elementID)) return false;				var elem = document.getElementById(elementID);				if(elem.movement) { //清除定時器					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這兩個值都是字符串，而進行算術比較操作需要的是數，不是字符串，需用parseInt()把字符串里的				//數值提取出來，如果把一個以數字開頭的字符串傳遞給parseInt，它將返回一個數值。				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表示數字，字符串要多加一個單引號			function insertAfter(newElement, targetElement) {				var parent = targetElement.parentNode;				if(parent.lastChild == targetElement) {					parent.appendChild(newElement);				} else {					parent.insertBefore(newElement, targetElement.nextSibling);				}			}		</script>	</body></html>