javascript里的定时器有哪些
时间:2021-12-06
来源:互联网
今天PHP爱好者为您带来javascript里的定时器有两种:1、单次定时器,使用setTimeout()方法定义,可以在规定时间(以毫秒计)过后执行一次代码块;2、循环定时器,使用setInterval()方法定义,按照指定的周期(以毫秒计)来重复执行某些代码。希望对大家有所帮助。
本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。
JavaScript 中提供了两种定时器:setTimeout() 和 setInterval()
setTimeout() | 在指定的时间后(单位为毫秒),执行某些代码,代码只会执行一次 |
setInterval() | 按照指定的周期(单位为毫秒)来重复执行某些代码,定时器不会自动停止,除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口 |
setTimeout()
JS setTimeout() 函数用来在指定时间后执行某些代码,代码仅执行一次。
使用方法:
setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
实例:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="button" onclick="click1()">获取验证码</button>
<span id="span"></span>
<script>
var time = 10;
var num;
var button = document.getElementById("button");
var span = document.getElementById("span");
function click1() {
//click是关键字,所有函数名改为click1
if (time == 0) {
button.disabled = false;
time = 10;
span.innerHTML = "";
clearTimeout(num);
} else {
button.disabled=true;
span.innerHTML = time + "秒后重新获得返回值";
time--;
num = setTimeout("click1()",1000);
}
}
</script>
</body>
</html>
setInterval()
JS setInterval() 函数可以定义一个能够重复执行的定时器,每次执行需要等待指定的时间间隔。
使用方法:
setInterval(code,millisec[,"lang"])
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
实例:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="button" onclick="set()">获取验证码</button>
<span id="span"></span>
<script>
var time = 10;
var num;
var button = document.getElementById("button");
var span = document.getElementById("span");
function set() {
num = setInterval("click()", 1000);
button.disabled = true;
}
function click() {
if (time == 0) {
button.disabled = false;
time = 10;
span.innerHTML = "";
clearInterval(num);
} else {
span.innerHTML = time + "秒后重新获得返回值"
time--;
}
}
</script>
</body>
</html>
以上就是javascript里的定时器有哪些的详细内容,更多请关注php爱好者其它相关文章!
-
币安交易所安全提示合集 时间:2025-05-12
-
币安交易所如何识别官方渠道 时间:2025-05-12
-
币安交易所用户隐私政策 时间:2025-05-12
-
币安交易所如何设置登录保护 时间:2025-05-12
-
币安交易所安全认证流程 时间:2025-05-12
-
Linux中export命令详解(定义、基本用法、高级用法、应用场景等) 时间:2025-05-12
今日更新
-
css如何设置导航条背景图片
阅读:18
-
css怎样不显示a标签下划线
阅读:18
-
css怎么设置单元格的高度宽度自适应
阅读:18
-
javascript是解释型还是编译型
阅读:18
-
css怎样设置图片透明度使图片逐渐消失
阅读:18
-
css怎样实现文字不透明背景半透明效果
阅读:18
-
php怎么去掉一维数组的键值(value)
阅读:18
-
php数组元素怎么进行反转
阅读:18
-
css怎么写一个椭圆形按钮
阅读:18
-
深入讲解Bootstrap中手风琴组件的使用方法(实例)
阅读:18