浅析javascript异步执行函数导致的变量变化问题解决思路

 更新时间:2016年05月13日 14:49:01   投稿:jingxian  
下面小编就为大家带来一篇浅析javascript异步执行函数导致的变量变化问题解决思路。小编觉得挺不错的,现在分享给大家,也给大家做个参考

浅析javascript异步执行函数导致的变量变化问题解决思路

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

控制台输出:
3
3
3

这是因为执行方法的时候for循环已经执行完成每次执行的时候取得都是3 而不是1-2-3这时我们可以使用立即执行函数为每一次循环创建一个变量副本来供定时器调用解决这个问题

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

控制台输出:
1
2
3

以上这篇浅析javascript异步执行函数导致的变量变化问题解决思路就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript 动态加载 css 方法总结

    javascript 动态加载 css 方法总结

    有时候我们在设计网页的时候想动态的加载css文件,并不是将css文件写死在页面中,这时就可以使用下面方法.
    2009-07-07
  • 浅析JS中NEW的实现原理及重写

    浅析JS中NEW的实现原理及重写

    本文通过实例代码给大家介绍了JS中NEW的实现原理及重写,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2020-02-02
  • 小程序组件之仿微信通讯录的实现代码

    小程序组件之仿微信通讯录的实现代码

    这篇文章主要介绍了小程序组件之仿微信通讯录的实现代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • js获取鼠标位置杂谈附多浏览器兼容代码

    js获取鼠标位置杂谈附多浏览器兼容代码

    最近在搞一个AJAX的小功能,目的是用浮动div框显示当前鼠标下控件的详细信息,其中获得鼠标位置这块害得我走了很多冤枉路,因为压根没有想到我下面提到的第二点的区别,所以我的页面出来总是找不到我之前定义的那个div
    2008-11-11
  • javascript中export 和export default的区别

    javascript中export 和export default的区别

    本文主要介绍了javascript中export 和export default的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 如何在CocosCreator中利用常驻节点做图层管理

    如何在CocosCreator中利用常驻节点做图层管理

    这篇文章主要介绍了如何在CocosCreator中利用常驻节点做图层管理,这些技巧非常实用,希望同学们看完,回去可以试一下
    2021-04-04
  • javascript+ajax实现产品页面加载信息

    javascript+ajax实现产品页面加载信息

    本文给大家分享的是使用javascript结合ajax实现产品页面无刷新加载信息的代码,非常的简单实用,有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript实现浅拷贝与深拷贝的方法分析

    JavaScript实现浅拷贝与深拷贝的方法分析

    这篇文章主要介绍了JavaScript实现浅拷贝与深拷贝的方法,结合实例形式总结分析了JavaScript浅拷贝与深拷贝的定义与使用方法,需要的朋友可以参考下
    2018-07-07
  • javascript 客户端验证上传图片的大小(兼容IE和火狐)

    javascript 客户端验证上传图片的大小(兼容IE和火狐)

    做web开发的哥们都会遇到批量上传图片的需求,相信大家都会遇到这样的问题,当选择好要上传的图片,提交服务器后,发现有图片的大小超过了系统允许的范围。
    2009-08-08
  • 关于ES6中的箭头函数超详细梳理

    关于ES6中的箭头函数超详细梳理

    箭头函数可以说是es6的一大亮点,使用箭头函数,可以简化编码过程,是代码更加的简洁,下面这篇文章主要给大家介绍了关于ES6中箭头函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08

最新评论