使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。下面分别介绍两种方法。
1．window.setTimeout方法
该方法可以延时执行一个函数，例如：
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
window.setTimeout(hello,5000);
//-->
</script>这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为：
window.setTimeout("hello()",5000);
读者可以体会它们的差别，在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行，可以使用window.clearTimeout(timeoutId)方法，该方法接收一个id，表示一个定时器。这个id是由setTimeout方法返回的，例如：
<script language="JavaScript" type="text/javascript">
<!--
function hello(){
alert("hello");
}
var id=window.setTimeout(hello,5000);
document.onclick=function(){
window.clearTimeout(id);
}
//-->
</script>这样，如果要取消显示，只需单击页面任何一部分，就执行了window.clearTimeout方法，使得超时操作被取消。
2．window.setInterval方法
该方法使得一个函数每隔固定时间被调用一次，是一个很常用的方法。如果想要取消定时执行，和clearTimeout方法类似，可以调用window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如：
//定义一个反复执行的调用
var id=window.setInterval("somefunction",10000);//取消定时执行
window.clearInterval(id);
上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法，下面将设计一个秒表，来介绍setInterval函数的用途：该秒表将包括两个按钮和一个用于显示时间的文本框。当单击开始按钮时开始计时，最小单位为0.01秒，此时再次单击按钮则停止计时，文本框显示经过的时间。另外一个按钮用于将当前时间清零。其实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="开始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取表单中的表单域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定义定时器的id
var id;
//每10毫秒该值增加1
var seed=0;
btnStart.onclick=function(){
//根据按钮文本来判断当前操作
if(this.value=="开始"){
//使按钮文本变为停止
this.value="停止";
//使重置按钮不可用
btnReset.disabled=true;
//设置定时器，每0.01s跳一次
id=window.setInterval(tip,10);
}else{
//使按钮文本变为开始
this.value="开始";
//使重置按钮可用
btnReset.disabled=false;
//取消定时
window.clearInterval(id);
}
}
//重置按钮
btnReset.onclick=function(){
seed=0;
}
//让秒表跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script>
分享到：
相关推荐
以上就是JavaScript中关于间隔定时器和延时定时器的基础知识，包括了setInterval和setTimeout这两个方法的使用，以及如何停止定时器的调用。掌握这些知识点可以帮助我们更好地利用JavaScript进行前端开发，提升页面...
本篇文章将深入探讨`jQuery.hover`以及与之相关的延时器概念。 `jQuery.hover`是jQuery提供的一种方法，它结合了`mouseenter`和`mouseleave`两个事件。当你把鼠标指针移动到元素上时，会触发`mouseenter`事件，而当...
在JavaScript编程领域，延时函数（也常被称为定时器或延迟执行函数）是开发者们频繁使用的工具之一。它们主要用于控制代码的执行顺序，为异步操作提供必要的等待时间，从而实现更加灵活和高效的程序设计。根据给定的...
"js延时菜单"是指通过JavaScript技术实现的一种交互功能，即当鼠标悬停在某一元素（如按钮或链接）上时，会经过一段延迟时间后展示一个下拉菜单。这种设计可以提高用户体验，避免用户无意间触发菜单，同时也能增加...
需要注意的是，在实际的Web应用中，定时器的暂停和继续可能涉及到更复杂的逻辑，例如需要保存定时器的状态、计时器的剩余时间等。在上述代码中，我们只是通过重新引用相同的函数和时间间隔参数来模拟定时器的继续...
清除定时器可以用延时器来完成。 clearInterval（定时器名称）； 举一个简单的例子 let sum = setInterval(function(){ console.log(x); },100); let x=9; steTimeout(function(){ clearInterval(sum); },300) ...
3. **延时执行**：在用户界面中，定时器可以用于实现延时操作，如倒计时、动画效果等。 计数器则是一种记录事件发生次数的设备或程序，它可以累加计数或者在特定条件满足时重置。计数器广泛应用于各种场景，例如： ...
JavaScript 中的定时器主要通过 `window` 对象的两个方法来实现，即 `window.setTimeout()` 和 `window.setInterval()`。这两个方法能够让你在 JavaScript 中实现在未来某个时间点或固定间隔执行代码的功能。 - `...
JavaScript滚动延时加载，也称为懒加载（Lazy Loading），是一种优化网页性能的技术。...在实际项目中，你还可以结合使用现有的JavaScript库和框架，如Vue.js或React，它们都有成熟的滚动延时加载解决方案。
1. **创建计时器**：JavaScript的`setTimeout`函数可以用来设置一个延时任务，例如定时提交。你需要指定一个函数和延迟时间（以毫秒为单位）。例如，如果希望在30分钟后自动提交表单，你可以这样写： ```...
在JavaScript中，我们可以使用 `setTimeout` 或 `setInterval` 创建定时器。然而，这些定时器在页面卸载时并不会自动销毁，因此需要我们手动进行清理。 为了解决这个问题，我们可以将定时器的引用存储在页面的数据...
定时器的概念在编程中通常与计时器或延时器相关联。它允许开发者设置一个在未来特定时间点或间隔执行的代码块。在不同的编程语言和框架中，定时器的实现方式各异。例如，在JavaScript中，我们可以使用`setTimeout`和...
在Android开发中，定时器（Timer）是一种非常实用的工具，用于执行延时或周期性的任务。本示例“android定时器的demo”主要展示了如何使用Android系统提供的定时器实现倒计时功能，并结合随机数生成器模拟登录场景。...
3. **JavaScript**：在浏览器环境中，setTimeout和setInterval是常见的定时器函数，而在Node.js中，可以使用setTimeout、setInterval，或者更高级的async/await配合setImmediate、process.nextTick。 4. **C/C++**...
2. **用户空间定时器**：这种定时器运行在用户态，常用于应用层的延时操作和周期性任务，如JavaScript的`setTimeout`和`setInterval`。 3. **硬件定时器**：这些定时器基于CPU外部的硬件设备，如RTC（实时时钟）或...
在Java中，我们可以使用`java.util.Timer`类或者`java.time`包中的定时器来实现延时任务；在Python中，可以使用`time.sleep()`或`threading.Timer`；在C#中，可以利用`System.Threading.Timer`或`Task.Delay`。这些...
【标题】"js设置时间延时url跳转.zip"中的主要知识点是JavaScript的定时器功能，特别是`setTimeout()`函数的应用，以及如何结合URL重定向实现特定时间后自动跳转页面。JavaScript作为网页交互的核心语言，提供了多种...
6. **定时器**：设置多个定时器或延时器，如果它们之间相互依赖或无限递归，也会形成一种炸弹效果。 在现代浏览器和安全环境中，JavaScript引擎和浏览器都有一定的防护机制，可以限制单个脚本的运行时间和资源消耗...
### JS定时器实例详解 #### 一、JS定时器概述 JavaScript 提供了两种用于创建定时器的方法：`setTimeout` 和 `setInterval`。这两种方法允许开发者能够控制代码的执行时机，实现定时任务。 #### 二、倒计时定时器...
这种需求通常可以通过JavaScript来实现，而"js设置时间延时url跳转"就是一个典型的例子。JavaScript是一种客户端脚本语言，它允许我们在用户浏览器上执行动态效果和交互操作。 首先，我们要理解JavaScript中的两个...