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

我们这次使用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)
 });

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

赞 (0)

相关推荐

  • JS 打印功能代码可实现打印预览、打印设置等

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

  • javascript打印html内容功能的方法示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS打印组合功能

    本文为大家分享了JS打印组合功能,功能全面,供大家参考,具体内容如下 1.局部打印--即想打印什么地方就打印什么地方  解决办法:  将不想打印的地方隐藏起来  <style type="text/css" media=print> .noprint{display : none } 分页的时候用  .PageNext{page-break-after: always;}  然后给不想打印的页面元素添加: class="Noprint" ,那就不会出现在

  • js调用打印机打印网页字体总是缩小一号的解决方法

    今天要做一个打印网页的小功能,直接调用window.print(),但是打印出来后,字体总是缩小一号,找不到原因... 后来尝试用一个IE的打印控件,但仅支持ie有点恶心,只能返回去继续找原因 原来,我要打印的页面因为是哥弹出层,所以出现这种现象,后来直接target="_blank",就可以正常打印了. 另外, 复制代码 代码如下: function preview() { bdhtml=window.document.body.innerHTML; sprnstr="&l

  • 代码实现打印功能(asp.net+javascript)

    一.在服务器端实现 1.这个是在本页面上的.cs文件里写的 复制代码 代码如下: if (resultInt > 0) { //清除验证码 ,显示执行结果,并转向新的地址 Session["YanZhengMa"] = ""; String caoCode = "if(confirm('提交成功,是否打印'))" + "{" + "window.location.href='printTKZ.aspx?type

  • js实现页面打印功能实例代码(附去页眉页脚功能代码)

    复制代码 代码如下: <html> <head></head> <style type="text/css" media="screen"> @media print{ .print {display:block;} .notPrint {display:none;} } </style> <script language="javascript"> function pre

  • JS调用打印机功能简单示例

    本文实例讲述了JS调用打印机功能的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

  • JavaScript调用浏览器打印功能实例分析

    本文实例讲述了JavaScript调用浏览器打印功能的方法.分享给大家供大家参考.具体如下: 1. 通用型,支持IE,Firefox,Chrome... 复制代码 代码如下: window.print(); 2. 只支持IE打印: <script> var print=function(){ /** * WebBrowser.ExecWB(1,1) 打开 * Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口 * Web.ExecWB(4,1) 保存网页 * Web.Ex

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

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

  • javascript闭包功能与用法实例分析

    javascript闭包功能与用法实例分析

    本文实例讲述了javascript闭包功能与用法.分享给大家供大家参考,具体如下: 理解闭包 闭包这个东西,确实是很麻烦.之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化. 闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数.创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回. 我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2. function f1(){ var n=999; function f2(){ aler

  • Javascript 实现计算器时间功能详解及实例（二）

    Javascript 实现计算器时间功能详解及实例（二）

    Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

  • 谈谈我对JavaScript原型和闭包系列理解(随手笔记6)

    相关阅读:谈谈我对JavaScript原型和闭包系列理解(随手笔记8)   谈谈我对JavaScript原型和闭包系列理解(随手笔记9) 什么是闭包 闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性.但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是: • 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在. • 闭包就是就是函数的"堆栈"在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配 • 当在一个函数内定义另外

  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    利用策略模式与装饰模式扩展JavaScript表单验证功能

    简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe

  • javascript如何实现暂停功能

    本文实例讲述了JS实现的自定义网页拖动类.分享给大家供大家参考,具体如下: Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能. javascript作为弱对象语言,一个函数也可以作为一个对象使用. 比如: function Test(){ alert("hellow"); this.NextStep=function(){ alert("NextStep"); } } 我们可以这样调用

  • 用Javascript实现Sleep暂停功能代码

    复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- function Sleep(obj,iMinSecond) { if (window.eventList==null) window.eventList=new Array(); var ind=-1; for (var i=0;i<window.eventList.length;i++) { if (window.eventList[i]==null) { wind

  • javascript中的闭包概念与用法实践分析

    本文实例讲述了javascript中的闭包概念与用法.分享给大家供大家参考,具体如下: 闭包的概念:闭包是指有权访问另一个函数作用域中的变量的函数 (引自<javascript高级程序设计第三版>178页).闭包的优点是不会产生全局变量,避免变量污染问题,但是闭包也有一个缺点就是闭包携带包含它的函数作用域会比其它函数占用更多的内存,过度使用会导致内存占用过多. wiki上关于闭包的概念: In programming languages, closures (also lexical clos

  • 使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

    效果图展示,感觉不错可以参考实例代码. 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document

  • JavaScript实现答题评分功能页面

    本文实例为大家分享了JavaScript实现答题评分功能的具体代码,供大家参考,具体内容如下 效果图 直接上代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

随机推荐