JavaScript setTimeout使用闭包功能实现定时打印数值


Posted in Javascript onDecember 18, 2015

我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧!   注意,如果用setInterval来实现的话,那肯定很简单,这次我们是使用setTimeout.   我们先从最简单思考入手.那就会写出下面的代码.

for(var i = 0; i < 5; i++)
{ 
setTimeout(console.log(i),i*1000); 
}

这段代码虽然依次打印了,每个i的值0,1,2,3,4.但是,执行的时间却没有起作用.为什么呢? 因为 console.log() 是方法的执行调用,在调用这个方法后,当是马上执行!,所以没有达到我们预期的目的。  

那我们继续看下面一段代码

for(var i = 0; i< 5; i++ ){ setTimeout(function(){ console.log(i); },i*1000); }

这里我们使用一个匿名函数包含了打印的console.log来打印i,所以 i这个值是共享的,还没等到执行第一个setTimeout的时候,for循环已经执行完成,最后的i = 5,所以i 会打印四次   其实我们两种解决办法,我们先来看第一种:

var j = 0; function abc(){ console.log("j = "+j); j++; }  
for(var i = 0; i < 10; i++ ){ 
setTimeout(abc,i*1000) }

这里我们另外一个全局变量来存储值,每执行一次函数abc,j就加一次,所以执行到setTimeout的时候,就会调用abc函数,所以会达到我们预期的效果,但是这里这个j是一个全局变量,全局变量会造成容易改变其值或者命名冲突等问题.   第二种办法的实现,我们再次引入闭包函数.因为闭包函数,每一次创建都会存在一个自己的空间来存储唯一的值.所以利用这个思维.我们把代码写成下面的代码.

for(var i = 0; i < 10; i++ )
{ 
(function(x){ setTimeout(function()
{ 
console.log(x) },x*1000) })(i) 
}

我们将i的每一次执行for循环的值,传给不同创建的闭包函数,这样每一个闭包函数里存储的i值,就都不会一样.所以就是达到我们的想要的结果.

ps:使用闭包对setTimeout进行简单封装

在写js脚本时,经常会用到一些拼写函数的情况,例如调用setTimeout

var msgalert="test"; 
 function TestAlert(msg) 
   { 
    alert(msg) 
   } 
    
   $(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert("+msgalert+")",1000); 
    }); 
})

查了很长时间,为什么就是弹不出对话框呢。检查了很长时间才发现,原来是少了一对单引号

$(document).ready(function () { 
  $("#btnCancel").click(function (e) { 
    setTimeout("TestAlert('"+msgalert+"')",1000); 
    }); 
})

这样的写法容易出错,还不容易检查出错误,如果使用闭包就可完全避免,改写如下

var msgalert="test"; 
  function dalayAlert(msg ,time){  
  setTimeout( 
  TestAlert(msg), 
  time 
  ); 
  }  
 function TestAlert(msg) 
 { 
  alert(msg) 
 } 
$(document).ready(function () {   
$("#btnCancel").click(function (e) { 
   dalayAlert(msgalert,1000) 
 });

由于使用了闭包,也简单了很多,检查错误也很容易了

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 #Javascript
jquery简单倒计时实现方法
Dec 18 #Javascript
js命名空间写法示例
Dec 18 #Javascript
JavaScript Split()方法
Dec 18 #Javascript
jquery中object对象循环遍历的方法
Dec 18 #Javascript
JavaScript的Number对象的toString()方法
Dec 18 #Javascript
You might like
php计算到指定日期还有多少天的方法
2015/04/14 PHP
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python字符串循环左移
2019/03/08 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python re模块常见用法例举
2021/03/01 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
小学秋季运动会报道稿
2014/09/30 职场文书
婚内分居协议书范文
2014/11/26 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
小学思品教学反思
2016/02/20 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android