Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval
定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果。定时器不属于 javascript，是 window 对象提供的功能。
setTimeout 用法：
window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<p id="p">定时改变文字</p>
<script>
function change(){
document.getElementById("p").innerHTML = "已更换";
}
window.setTimeout("change()", 3000); //3秒之后执行change方法
</script>
</body>
</html>
优化：定时器的效果之上加上倒计时效果
setInterval('语句',毫秒); //每隔指定毫秒执行一次
清除定时器：
clearInterval();
和
clearTimeout();
【代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<input type="button" name="time" value="5">
<p id="p">定时改变文字</p>
<script>
function change(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value)-1;
inp.value = time;
if(time == 0){
document.getElementById("p").innerHTML = "已更换";
clearInterval(clock); //清除定时器
}
}
var clock = setInterval("change()", 1000); //每秒钟执行一次
</script>
</body>
</html>
【例】如果不适用 setInterval，只使用 setTimeout，达到每过一段时间执行一次的效果
使用 setTimeout 实现 setInterval 的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 300px;
height: 300px;
background: blue;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<input type="button" name="time" value="5">
<p id="p">定时改变文字</p>
<script>
var clock = null;
function change(){
var inp = document.getElementsByName("time")[0];
var time = parseInt(inp.value)-1;
inp.value = time;
if(time == 0){
document.getElementById("p").innerHTML = "已更换";
clearTimeout(clock);
return;
}
setTimeout("change()", 1000);
}
var clock = setTimeout("change()", 1000); //每秒钟执行一次
</script>
</body>
</html>
Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval的更多相关文章
- JS 定时器 setTimeout 与 setInterval 的区别和用法
定时器: window.setTimeout(function(){},间隔时间毫秒); -- 定时炸弹,延迟执行,只执行一次 window.setInterval(function(){},间隔的时 ...
- 定时器setTimeout()和setInterval()使用心得整理
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. 一.setTimeout() setTimeout函 ...
- 有关定时器setTimeout()、setInterval()详解
JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成. setTimeout() setTimeout函数用 ...
- 高级定时器-setTimeout()、setInterval()、链式setTimeout()
使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能.执行时机是不能保证的,因为在页面的生命周期中,不同时间可能有其他代码在控制 JavaScript ...
- 20180904 定时器setTimeout和setInterval回调问题
引用: setTimeout和setInterval两者的区别 setTimeout和setInterval的优缺点 setTimeout和setInterval详解 两者的作用都是在定时多少毫秒后回 ...
- JavaScript 的定时（Timing ）事件——setTimeout()与setInterval()
JavaScript 可以在时间间隔内执行,这就是所谓的定时事件( Timing Events). ㈠Timing 事件 ⑴window 对象允许以指定的时间间隔执行代码,这些时间间隔称为定时事件. ...
- 使用定时器settimeout、setInterval执行能传递参数的函数
无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决.经网上查询后整理如下: 例如对于 ...
- javascript定时器:setTimeout与setInterval
概述: setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段,只执行一次: setInterval:周期性地调用一个函数(function)或者执行一段代码,重复执行: 语法格式 ...
- JavaScript之关闭轮询定时器(setTimeout/clearTimeout|setInterval/clearInterval)小结
已知: 1.1 开启Timeout程序: scope.setTimeout("functionName()" | functionHandle, timeValue) 返回值:ti ...
随机推荐
- Android实现监测网络状态
本文主要用到了安卓监测网络状态变化功能,实现了WIFI,3G,无网络状态切换时发出通知的功能. 主要知识点 service broadcast 接口回调实现 service的基本知识 service可 ...
- p168习题
- jquery 事件冒泡 解决 ie firefox 兼容性问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- 微信聊天测试脚本 wx_sample.php
<?php </FuncFlag> </xml>); curl_setopt($ch, CURLO ...
- hdu 1806 rmq
找到一个区间内出现最多的数的次数 10 3 //10个数字三次询问 -1 -1 1 1 1 1 3 10 10 10 2 3 1 10 5 10 0 143 #include<cstdio> ...
- VB已死？还是会在Roslyn之下焕发新生？
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 由于最初的ASP.NET 5测试版并未支持VB,导致社区有一种声音:觉得VB将死.今天我们就 ...
- c++find函数用法
头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...
- onSaveInstanceState和onRestoreInstanceState
本文摘自: http://h529820165.iteye.com/blog/1399023 Android calls onSaveInstanceState() before the activi ...
- Android ViewHolder的作用与用法
就是一个持有者的类,他里面一般没有方法,只有属性,作用就是一个临时的储存器,把你getView方法中每次返回的View存起来,可以下次再用.这样做的好处就是不必每次都到布局文件中去拿到你的View,提 ...
- Servlet应用的运行流程
其中,红色部分为我们开发人员要做的,其他部分是框架做的. 学习就要搞懂整个运行的流程!否则,不利于个人技术的积累!