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 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
node.js实现上传文件功能
Jul 15 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
JavaScript array常用方法代码实例详解
Sep 02 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 版本]
2007/03/20 PHP
PHP网站基础优化方法小结
2008/09/29 PHP
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
详解JavaScript 为什么要有 Symbol 类型?
2019/04/03 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Python中协程用法代码详解
2018/02/10 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python基于http下载视频或音频
2018/06/20 Python
python requests.post带head和body的实例
2019/01/02 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
python实现简单俄罗斯方块
2020/03/13 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
用 python 进行微信好友信息分析
2020/11/28 Python
python自动化发送邮件实例讲解
2021/01/04 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
物流专业大学的自我评价
2014/01/11 职场文书
学校卫生检查制度
2014/02/03 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
交通事故和解协议书
2014/09/25 职场文书
初中重阳节活动总结
2015/05/05 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
python playwright之元素定位示例详解
2022/07/23 Python