js计数器实现实例(setInterval()、clearInterval()、setTimeout()和clearTimeout())

window.setInterval()方法
介绍

周期性地调用一个函数(function)或者执行一段代码。
语法

 代码如下 复制代码

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
var intervalID = window.setInterval(code, delay);

这里

    intervalID 是此重复操作的唯一辨识符，可以作为参数传给clearInterval()。
    func 是你想要重复调用的函数。
    code 是另一种语法的应用，是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的，不推荐的原因和eval()一样)。
    delay 是每次延迟的毫秒数 (一秒等于1000毫秒)，函数的每次调用会在该延迟之后发生。和setTimeout一样，实际的延迟时间可能会稍长一点。

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段).
示例
例１：基本用法

var intervalID = window.setInterval(animate, 500);

例２：两种颜色的切换

下面的例子里会每隔一秒就调用函数flashtext()一次，直至你通过按下Stop按钮来清除本次重复操作的唯一辨识符intervalID。

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>setInterval/clearInterval example</title>
<script type="text/javascript">
var nIntervId;

function changeColor() {
  nIntervId = setInterval(flashText, 500);
}

function flashText() {
  var oElem = document.getElementById("my_box");
  oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
}

function stopTextColor() {
  clearInterval(nIntervId);
}
</script>
</head>

<body onload="changeColor();">
<div id="my_box">
<p>Hello World</p>
</div>
<button onclick="stopTextColor();">Stop</button>
</body>
</html>

window.clearInterval()方法
概述

取消掉用setInterval设置的重复执行动作.
语法

window.clearInterval(intervalID)

intervalID是你想要取消的重复动作的ID,这个ID是个整数,是由setInterval()返回的.

window.setTimeout方法
概述

在指定的延迟时间之后调用一个函数或者执行一个代码片段.
语法

 代码如下 复制代码

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
var timeoutID = window.setTimeout(code, delay);

说明:

    timeoutID 是该延时操作的数字ID, 此ID随后可以用来作为window.clearTimeout方法的参数.
    func 是你想要在delay毫秒之后执行的函数.
    code 在第二种语法,是指你想要在delay毫秒之后执行的代码 (使用该语法是不推荐的, 不推荐的原因和eval()一样)
    delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点,查看下面的备注.

需要注意的是,IE不支持第一种语法中向延迟函数传递额外参数的功能.如果你想要在IE中达到同样的功能,你必须使用一种兼容代码 (查看callback arguments 一段).
备注

你可以使用 window.clearTimeout()来取消延迟操作.

如果你希望你的代码被重复的调用 (比如每 N 毫秒一次),考虑使用window.setInterval().
传递字符串字面量

向setTimeout()传递一个字符串而不是函数会遭受到与使用eval一样的风险.

 代码如下 复制代码

// 推荐
window.setTimeout(function() {
    alert("Hello World!");
}, 500);

// 不推荐
window.setTimeout("alert("Hello World!");", 500);

字符串会在全局作用域内被解释执行,所以当setTimeout()函数执行完毕后,字符串中的变量不可用.

setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval().

 代码如下 复制代码

<!Doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<p>点击按钮查看效果(2s后弹出): <input type="button" value="setTimeout" /> <input type="button" value="clearTimeout" /></p>
<p>点击按钮查看效果(每2s弹出):<input type="button" value="setInterval" /> <input type="button" value="clearInterval" /></p>
<div id="ul1">
<input type="text" id="clock" size="35"/>
<button onclick="window.clearInterval(c)">stop Interval</button>
</div>
<script type="text/javascript">
var c = self.setInterval("clock()",50);
function clock(){
var t = new Date();
document.getElementById("clock").value=t;
}
var timeout=function(){
alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可停止执行!')
}
var interval=function(){
alert('每2s循环弹出,直至clearInterval或关闭窗口!')
}
var input=document.getElementsByTagName('input');
console.log(input.length);
var clearTimeoutFun=null;
var clearIntervalFun=null;

input[0].onclick=function(){
clearTimeoutFun=setTimeout(timeout,2000);
}
input[1].onclick=function(){
clearTimeout(clearTimeoutFun);
}
input[2].onclick=function(){
clearIntervalFun=setInterval(interval,2000);
}
input[3].onclick=function(){
clearInterval(clearIntervalFun);
}
</script>
</body>
</html>
时间： 2024-07-31 01:25:42

js计数器实现实例(setInterval()、clearInterval()、setTimeout()和clearTimeout())的相关文章

js中的setTimeout和clearTimeout的教程

在前端网页开发时,焦点图的存在随处可见.通常都是去下载已经封装好的jquery来实现需要的功能,有多少人能实际了解实际原理吗?通过自己对原生js的学习,今天对setTimeout()·和clearTimeout()的用法做个小小的总结: 1.setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:setTimeout(code,millisec)其中code是要调用的函数后要执行的method或function,millisec指的是需等待的毫秒数 首先是自己写的一个事例,

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时

js中setTimeout()与clearTimeout()用法实例浅析

  本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <input type = text id = aaa > <input type = button

js中setTimeout()与clearTimeout()用法实例浅析_javascript技巧

本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip

js中setInterval与SetTimeOut实现团购倒计时效果

简单示例 看个简单的例子,简单页面在加载完两秒后,写下Delayed alert!  代码如下 复制代码 setTimeout('document.write("Delayed alert!");', 2000); 我们先来看一个setInterval版计时跳转效果 代码如下  代码如下 复制代码 $(function () { setInterval(function () { var time = $("#time").text(); time = parseI

JavaScript中停止执行setInterval和setTimeout事件的方法

 这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下     js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作. (1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法.具体示

JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法_javascript技巧

本文实例讲述了JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法.分享给大家供大家参考,具体如下: setTimeout 用于延时器,只执行一次. setInterval:用于多次执行. 项目中引用到jquery.timers-1.2.js定时器,并且MSClass做信息定期滚动,每3分钟执行一次,执行三次左右,滚动的次数越来越快,原因在于timers和MSClass都用了setInterval, 都会再次添加一个setInterval,最后导致几个setIn

JavaScript中SetInterval与setTimeout的用法详解_javascript技巧

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数

javascript中SetInterval与setTimeout的定时器用法_javascript技巧

示例一: 查看演示 下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi