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( ...
随机推荐
- lesson - 6 Linux下磁盘管理
1. 查看磁盘或者目录的容量df 查看磁盘各分区使用情况 不加参数以k为单位 df -i inode数,df -h 以G或者T或者M df -m 以M单位显示 du 查看目录或者文 ...
- Nodejs密集型CPU解决方案
首先说一下nodejs单线程的优势: 高性能,与php相比,避免了频繁创建切换线程的开销,执行更加迅速,资源占用小. 线程安全,不用担心同一变量被多线程读写,造成程序崩溃. 单线程的异步和非阻塞,其实 ...
- MIG IP控制DDR3读写测试
本文设计思想采用明德扬至简设计法.在高速信号处理场合下,很短时间内就要缓存大量的数据,这时片内存储资源已经远远不够了.DDR SDRAM因其极高的性价比几乎是每一款中高档FPGA开发板的首选外部存储芯 ...
- e.target和this的区别
```e.target与this的区别 event.target表示发生点击事件的元素this表示注册点击事件的元素 this 等于 e.currentTarget 指的是现在的目标this是所有原生 ...
- Java实现简单工厂模式
昨天看了一下设计模式,复习了一下简单工厂模式,做个笔记,浅淡一下我对简单工厂模式的理解.书上使用的是C#,因为我所学的是Java,所以本人就用Java实现了一遍.如果有讲的不对的地方,希望能够指出来. ...
- Python环境安装及编辑器配置(一)
在2018年决定写一些关于Python的文章,其实写博客这件事在2016年就有了,但是因为个人的一些原因一直被耽搁.所以2018年的目标之一就是写多一点的博客,不管是是生活还是工作.好吧,废话不多说, ...
- 更加清楚理解mvc结构
更加清楚理解mvc结构 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言.评论.
- Invalid bound statement (not found): com.shizongger.chapter2.mapper.UserMapper.insertUser 解决方案
在配置MyBatis时报错信息如下: Invalid bound statement (not found): com.shizongger.chapter2.mapper.UserMapper.in ...
- pyspark进行词频统计并返回topN
Part I:词频统计并返回topN 统计的文本数据: what do you do how do you do how do you do how are you from operator imp ...
- 【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据
在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...