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>
新闻热点
疑难解答
