js-循环执行一个函数
2016-06-15 16:16
309 查看
js里的两个内置函数:setInterval()与setTimeout()提供了定时的功能,前者是每隔几秒执行一次,后者是延迟一段时间执行一次。javascript 是一个单线程环境,定时并不是很准,遇到阻塞的操作会延迟,代码:
以上代码会每隔一分钟弹窗,如果不关闭弹窗。Js不会在下一秒执行这个函数。也就说,被阻塞了。
除了setInterval()实现函数重复执行外,还可以用setTimeout()实现函数重复执行。是这么做的:
代码中用setTimeout()调用自身。这样函数执行一次,会一直延迟一段时间调用自身,实现了函数重复执行,是不是觉得很妙?看过许多网页上用到的jquery倒计时插件,都是用setTimeout()来重复执行函数。
setTimeout()执行顺序有个坑,看下面的代码,你觉得控制台输出的结果是什么:
答案是先输出2,再输出1。这跟我们的直觉是不一致的。当事件队列为空的时候,才执行SetTimeout()里面的代码。
回到前面,js定时不准的问题,看到一篇靠谱的博客,用的是setTimeout()这种。可以参考后续博客,点下面的链接:
<script> var fn = function(){ alert("fn()函数被执行了"); } setInterval(fn,1000); </script>
以上代码会每隔一分钟弹窗,如果不关闭弹窗。Js不会在下一秒执行这个函数。也就说,被阻塞了。
除了setInterval()实现函数重复执行外,还可以用setTimeout()实现函数重复执行。是这么做的:
<script> var fn = function(){ alert("fn()函数被执行了"); setTimeout(fn, 1000) } fn(); </script>
代码中用setTimeout()调用自身。这样函数执行一次,会一直延迟一段时间调用自身,实现了函数重复执行,是不是觉得很妙?看过许多网页上用到的jquery倒计时插件,都是用setTimeout()来重复执行函数。
setTimeout()执行顺序有个坑,看下面的代码,你觉得控制台输出的结果是什么:
<script> setTimeout(function() { console.log(1); }, 0); console.log(2); </script>
答案是先输出2,再输出1。这跟我们的直觉是不一致的。当事件队列为空的时候,才执行SetTimeout()里面的代码。
回到前面,js定时不准的问题,看到一篇靠谱的博客,用的是setTimeout()这种。可以参考后续博客,点下面的链接:
前端倒计时不准的问题
相关文章推荐
- [转载]HighCharts 详细使用及API文档说明
- 2016.06.15廖雪峰JS__学习笔记(浏览器对象)__P11
- 几种继承模式的比较
- JS中的“!!”
- js 获取url中的参数值
- JavaScript 正则表达式与字符串查找
- js 更改URL参数
- xml 转json 传输
- JavaScript中操作Mysql数据库实例
- 2016.06.15廖雪峰JS__学习笔记(class继承)__P10
- jsp判断为空用not empty
- JavaScript对象数组排序实例方法浅析
- js弹出对话框
- 2016.06.15廖雪峰JS__学习笔记(原型继承)__P9
- JavaScript DOM 中利用通配符匹配元素
- JavaScript DOM 中利用通配符匹配元素
- JavaScript DOM 中利用通配符匹配元素
- JavaScript DOM 中利用通配符匹配元素
- JavaScript DOM 中利用通配符匹配元素
- JavaScript DOM 中利用通配符匹配元素