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 ...
随机推荐
- 【读书笔记】读《JavaScript高级程序设计-第2版》 - 非函数部分
章节列表: 第08章:BOM 第09章:客户端检测 第10章:DOM 第11章:DOM2和DOM3 第12章:事件 第13章:表单脚本 第14章:错误处理与调试 第17章:Ajax和JSON第20章: ...
- Android之ViewDragHelper
在自定义ViewGroup中,很多效果都包含用户手指去拖动其内部的某个View(eg:侧滑菜单等),针对具体的需要去写好onInterceptTouchEvent和onTouchEvent这两个方法是 ...
- kvm xxx.xml文件的位置
/var/run/libvirt/qemu/xxx.xml /etc/libvirt/qemu/xxx.xml
- (转)浅谈MD5加密算法中的加盐值(SALT)
我们知道,如果直接对密码进行散列,那么黑客可以对通过获得这个密码散列值,然后通过查散列值字典(例如MD5密码破解网站),得到某用户的密码. 加Salt可以一定程度上解决这一问题.所谓加Salt方法,就 ...
- FileHelper-文件操作辅助类
using System; using System.Collections.Generic; using System.IO; using System.Text; namespace Whir.S ...
- M方法和D方法的区别
M方法和D方法的区别 ThinkPHP 中M方法和D方法都用于实例化一个模型类,M方法 用于高效实例化一个基础模型类,而 D方法 用于实例化一个用户定义模型类. 使用M方法 如果是如下情况,请考虑使用 ...
- 使用VIRTUALBOX安装ANDROID系统 | 图文教程 | 相关设置
使用VIRTUALBOX安装ANDROID系统 | 图文教程 | 相关设置 http://icaoye.com/virtualbox-run-android/
- Xamarin.iOS项目编译提示Could not AOT the assembly
Xamarin.iOS项目编译提示Could not AOT the assembly 错误信息:Could not AOT the assembly **************.dll 这个错误是 ...
- .net4.5 await async 简化之后的异步编程模型
步骤核心: 方法签名包含一个 async 修饰符. 按照约定,异步方法的名称以“Async”后缀结尾. 返回类型为以下之一: Task<TResult> 如果您的方法有操作数为 TRes ...
- [Cocos2d-x For WP8]EaseActions缓动动作
我们用Silverlight框架开发WP8的应用程序的时,编写动画可以使用缓动效果来实现缓动动画对吧,那么在Cocos2d-x框架里面我们一样是可以缓动动作(缓动动画),其实技术的东西都是想通的,如果 ...