Javascript的setTimeout()使用闭包特性时需要注意的问题

 setTimeout经常被用于延迟执行某个函数,用法为:

 

 代码如下:

setTimeout(function(){

}, timeout);

 

有时为了进行异步处理,而使用setTimeout(function…,0);比如:

 

代码如下:

function f(){
… // get ready
setTimeout(function(){
…. // do something
}, 0);
 
return …;
}

 

 在setTimeout设定的函数处理器之前,函数f返回;

在使用异步处理时,尤其是使用闭包特性时,要特别小心;

例如:

 

 代码如下:

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

 

对于初次使用这种方式的同学来说,很可能会认为程序会打印0…9,可结果确实打印10个10;
问题就在于,当循环完成时,function得到执行,而i已经变成10,console.log(i)中使用的是10!
 
加入你的目的是打印0…9,那么可以换一种方式,用函数参数来保存0….9(其实也是利用了闭包):

 

代码如下:

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

时间: 2024-12-24 21:29:40

Javascript的setTimeout()使用闭包特性时需要注意的问题的相关文章

Javascript的setTimeout()使用闭包特性时需要注意的问题_javascript技巧

setTimeout经常被用于延迟执行某个函数,用法为: 复制代码 代码如下: setTimeout(function(){ - }, timeout); 有时为了进行异步处理,而使用setTimeout(function-,0):比如: 复制代码 代码如下: function f(){ - // get ready setTimeout(function(){ -. // do something }, 0);   return -; }  在setTimeout设定的函数处理器之前,函数f返

深入理解JavaScript的闭包特性

有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. <!DOCTYPE HTML>  <html>  <head>  <meta charset="utf-8" />  <title>闭包演示</title>  <style type="text/css">      p {background:gold;}   <

详解JavaScript中的属性和特性_javascript技巧

JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解  第一部分:理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字

Javascript中setTimeout,setInterval定时执行操作

今天在项目中遇到一个关于定时执行操作的问题.Javascript为定时操作提供了两个方法:  代码如下 复制代码 1.timeId = setTimeout("function();",delaytime);  //timeId就是这个定时器的ID(后面会用到), delaytime的单位是千分之一秒, millisecond.  代码如下 复制代码 2.timeId = setInterval("function();",delaytime); //同上 这两个定

javascript模板引擎artTemplate的特性实现

文章简介:本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理,包括新一代 javascript 模板引擎 artTemplate 的特性实现原理,欢迎共同探讨. 随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在

谈PHP 闭包特性在实际应用中的问题

PHP5.3 新版本跟随了很多新特性, 其中比较惹眼的特性之一就是支持了闭包.那么以后,我们也可以和那帮写 Ruby.Javascript 等等高科技语言的家伙们一样,写出非常酷的代码吗?呃,其实大部分情况下是可以的,而有些方面还是令人非常的困扰,下面慢慢道来. PHP5.3 新版本跟随了很多新特性, 其中比较惹眼的特性之一就是支持了闭包.那么以后,我们也可以和那帮写 Ruby.Javascript 等等"高科技语言"的家伙们一样,写出非常酷的代码吗?呃,其实大部分情况下是可以的,而有

Javascript中setTimeOut和setInterval的定时器用法

 Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等.但它们的应用是有区别的. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函

javascript的setTimeout以及setInterval休眠问题。

原文:javascript的setTimeout以及setInterval休眠问题. 前端码农们在做项目中时候,必定不可少的需要做到轮播效果.但是有些特殊的需求,比如:    需要做到第一个容器内容轮播滚动之后,第二个容器内部再轮播滚动,再第三个容器内容轮播滚动. 这时候我的一开始的思路是:每个容器都看成一个单独的轮播效果,既然是依次的滚动就设定滚动开始时间差,三个setTimeout()分别延迟差.    HTML 代码: <div id="warp">        &

JavaScript window.setTimeout() 的详细用法_基础知识

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别 说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! setTimeo