js定时器之setTimeout的使用
之前用过定时器,只不过用的不是很多,关于js定时器,一般而言我们很容易想到setInterval和setTimeout这两种。
刚开始学js定时器时,记住了setInterval,该方法一般用于每隔多久就调用定时器中的方法一次,是可以循环执行的,而setTimeout则是过多久后才执行定时器中的方法,只执行一次。所以我就想当然的以为如果要循环调用某方法,就得使用setInterval,如果是只调用某方法一次,就使用setTimeout,却发现原来我错了,其实,setTimeout也可以循环执行某一方法。但是必须将该定时器放在一个函数中,在外面调用这个函数,这样,函数里的定时器就可以循环执行了。
例如,我要实现点击一个按钮,然后旁边的输入框中的值实现累加效果。如图:

这里直接上代码:
<input type="button" value="按钮" onclick="getVal()"><input type="text" id="num" value="0">
<script>
function getVal(){
var val = document.getElementById('num').value; // 获取输入框中的值
val++;
document.getElementById('num').value = val;
setTimeout(getVal,1000) // 一秒后调用getVal方法
}
</script>
这里是将定时器放在函数中,然后通过点击按钮来调用该函数,从而实现定时器循环执行。
js定时器之setTimeout的使用的更多相关文章
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- asp.net类似于js中的setTimeOut()的函数作用?
asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...
- js里的setTimeout和setInterval之后的页面是空白,阻塞浏览器的document对象,但是不阻塞script方法
js里的setTimeout和setInterval是否进程阻塞? 阻塞浏览器的document对象,但是不阻塞script方法 当你在setTimeout中使用document.write时是不行的 ...
- ExtJS定时和JS定时
ExtJS定时 //定时刷新待办事宜状态 var task={ run:function(){ //执行的方法或方法体 }, interval:5*60*1000 //5分钟 } //定时启动 Ext ...
- Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
最近在做项目时用到了定时执行的js方法,setInterval与setTimeout时间长了不用有些生疏了,所以自己总结了一下,记下来,以便以后使用. Document自带的方法: 循环执行:var ...
- javascript中的两个定时函数setTimeOut()和setInterVal()的区别
js中经常性要用到间隔几秒或暂停几秒执行某个函数, 简单介绍我从网上收集到setTimeOut()和setInterVal()的区别1.setInterVal()介绍 1)定义 setInterval ...
- 关于js中的setTimeout和setInterval
http://ejohn.org/blog/how-javascript-timers-work 这是John的一篇博文说到setTimeout和setInterval的区别,在看js高效图形编程的时 ...
- js定时跳转
在项目中有时会用到定时跳转,自己收藏了一个比较好用的 js写的,不依赖jQuery <script type="text/javascript"> function c ...
- JavaScript定时机制setTimeout与setInterval研究
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
随机推荐
- KVM(二):KVM应用
++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...
- [知了堂学习笔记]_用JS制作《飞机大作战》游戏_第1讲(素材查找和界面框架搭建)
一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...
- SpringMVC配置双数据源,一个java项目同时连接两个数据库
数据源在配置文件中的配置 请点击---> java架构师项目实战,高并发集群分布式,大数据高可用,视频教程 <pre name="code" class=" ...
- SpringBoot初步
1.创建maven 项目 quickstart类型 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" ...
- 正确使用volatile场景--状态标志
同步机制:volatile 特点:可见性:不具备原子性 每个线程有自己单独的内存:如果线程1和线程2公用一个变量name:如果两个线程并发进行,并且需要访问变量name:如果这个变量具有了可见性,线程 ...
- python匿名函数
文章导读: 以前自己一直没搞明白Python中的匿名函数,现在拿这个问题基本上搞明白了,拿自己的理解整成一篇文章,附带大量例子,让其更加好理解. 在编程语言中,函数的应用: 1. 代码块重复,这时候必 ...
- Java IO详解(四)------字符输入输出流
File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...
- 怎么为WebStorm更换主题 修改字体样式
这篇文章主要用于帮助大家解决怎么为webstorm换theme. 首先,到选择一个自己喜欢的皮肤,Webstorm皮肤网址: http://phpstorm-themes.com/ 然后,选中你喜欢的 ...
- Head First设计模式之责任链模式
一.定义 避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止. 主要解决:职责链上的处理者负责处理请求,客户只需要将请求 ...
- python词云的制作方法
第一次接触到词云主要是觉得很好看,就研究了一下,官方给出了代码的,但是新手看的话还是有点不容易,我们来尝试下吧. 环境:python2.7 python库:PIL(pillow),numpy,matp ...