使用 JavaScript 可以实现代码的延时执行, 也就是说当一个函数被调用时不立即执行某些代码, 而是等一段指定的时间后再执行, 这就叫做计时事件.
JavaScript 的计时事件的函数:
setTimeout() - 在指定时间后执行代码
clearTimeout() - 取消 setTimeout()
注意: setTimeout() 和 clearTimeout() 都是 html DOM 的 Windows 对象的函数.
setTimeout 详解
var t=setTimeout("javascript 语句", 时间参数)
注: 时间参数单位为毫秒
示例:
var t=setTimeout("alert('3 seconds!')",3000)
如果 JS 语句带变量, 则必须用 + 号将变量连接起来, 如:
var t=setTimeout("document.getElementById("+menuid+").style.display='none'",3000)
clearTimeout 详解
语法:
clearTimeout(setTimeout 的变量名)
示例:
clearTimeout(t) // 其中 t 为前面设置的 setTimeout 的变量
使用 clearTimeout 可以随时停止计时.
JavaScript 使用 setTimeout() 函数实现延时执行示例:
延迟切换 tab
需求: 页面上有几个 tab, 切换 tab 的时候, 会对某个特定区域的数据进行拉取更新.
弊端: 用户从第一个 tab 切换一直快速切到尾, 就会产生 n 个 Ajax 请求. 其实用户只是需要看到最后一个 tab 的数据.
- var changeTab = function(){
- var timeId = 0;
- return function(tabId){
- if(timeId){
- clearTimeout(timeId);
- timeId=0;
- }
- setTimeout(function(){
- //Ajax do something
- },500);
- };
- }();
来源: http://www.css88.com/qa/javascript/11202.html