浅析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异步执行函数导致的变量变化问题解决思路就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈js文件引用方式及其同步执行与异步执行

    任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

  • JavaScript队列函数和异步执行详解

    编辑注:在Review别人的JavaScript代码时曾看到过类似的队列函数,不太理解,原来这个是为了保证函数按顺序调用.读了这篇文章之后,发现还可以用在异步执行等. 假设你有几个函数fn1.fn2和fn3需要按顺序调用,最简单的方式当然是: fn1(); fn2(); fn3(); 但有时候这些函数是运行时一个个添加进来的,调用的时候并不知道都有些什么函数:这个时候可以预先定义一个数组,添加函数的时候把函数push 进去,需要的时候从数组中按顺序一个个取出来,依次调用: var stack =

  • 自己封装的javascript事件队列函数版

    背景 javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题: 一.使用addEventListener()或attachEvent()添加的匿名函数无法移除. 复制代码 代码如下: var oBtn = document.getElementById('btn'); oBtn.addEventListener('click',function(){    alert('button is clicked')},false) oBtn.

  • 浅谈js的异步执行

    1.Javascript语言的执行环境是"单线程"(single thread): 优点:实现起来比较简单,执行环境相对单纯: 缺点:只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行. 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). 2.&

  • 浅析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( (functio

  • 深入浅析javascript立即执行函数

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花; 当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解.  JavaScript 函数语法 函数就是包裹在花括号中的代码块,前面使用了关键词 function: function functionname() { 这里是要执行的代码 } 当调用该函数时,会执行函数内的代码. 可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript

  • JavaScript立即执行函数用法解析

    JavaScript立即执行函数用法解析

            我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用, function fn(){ console.log(1); } fn(); 打印结果为:         如果不调用的话,我们打印的结果永远不会显示.         所以这里就会提到我们的立即执行函数,所谓立即执行函数,就是不需要调用,立马就能执行的函数. 立即执行函数有两种最常见的写法: (function(){})() (function(){}()) 举个例子: (function

  • JavaScript异步队列进行try catch时的问题解决

    目录 一.前言 二.主要讲的异步队列方法 2.1 setTimeout 2.1.1 问题表现 2.1.2 问题原因 2.2 Promise 2.3 callback 2.4 Async await 一.前言 我们在写js的时候,经常的会遇到需要异步去请求接口,或者通过setTimeout或Promise去做什么事, 然后让同步进程继续向下走, 当到某个时间节点的时候或者数据请求成功的时候在通过eventloop的方式回调执行.这本身是js的特点和优势. 但是,异步队列执行也存在错误的情况,这时,

  • javascript自执行函数

    function (window, $, undefined) { play=function(){ $("#demo").val("This is a demo."); } window.wbLogin = play; })(window, jQuery); 像上边这样的代码为什么要把window, jQuery对象传进去? 为什么要传入 jQuery? 通过定义一个匿名函数,创建了一个"私有"的命名空间,该命名空间的变量和方法,不会破坏全局的

  • 浅析JavaScript异步代码优化

    前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用.定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步编程至关重要的前提.下面我们从问题出发,一步步完善你的异步代码. 异步问题 1. 回调地狱 首先,我们来看下异步编程中最常见的一种问题,便是回调地狱.它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的,比如: // 一个动画结束后,执行下一个动画,下一个

  • 详解javascript立即执行函数表达式IIFE

    详解javascript立即执行函数表达式IIFE

    一.IIFE解释 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 像如下的代码所示,就是一个匿名立即执行函数: (function(window, undefined){ // 代码... })(window); 二.括号的意义 2.1 包住function(){}的括号的意义 这个括号的目的,是为了把function(){}转化为表达式.像一些库的源码,喜欢用如下方式代替: ~function(){ // 代码... }(); 或者这种方

  • javascript自执行函数之伪命名空间封装法

    自执行函数:自动执行的函数.它在被解释时就已经在运行了.一般函数都是在被调用时才会执行的. 自执行函数的一般格式:(function() { 函数体 })(); 而且,自执行函数中一般都会有一个function() {}形式的匿名函数. 下面的代码在window对象中创建一个命名空间 mySpace,并把自执行函数中的方法封装在mySpace命名空间之下,以便于我们调用这个自执行函数中的一些功能. 复制代码 代码如下: (function() { //根据id获取对象 function $(id

  • JavaScript自执行函数和jQuery扩展方法详解

    我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分的,将JS代码封装到函数中进行调用可以避免变量名/函数名冲突的问题,但是这也并不是万无一失,因为封装函数本身有可能和其它函数重名,解决方案:自执行函数. 自执行函数是用一对圆括号将匿名函数包起来,加括号(传参)会立即执行.因为函数无名字,实现了作用域的绝对隔离和函数名的冲突问题.基本形式如下: (f

  • Javascript异步执行不按顺序解决方案

    案例分析: 比如执行懒加载时候,onscroll 事件触发多次事件时候会调用多次 ajax 回调事件,由于每个事件返回先后次序并不能保证和触发前一致,所以在数据响应返回后所添加的数据顺序就很在 push 到数组上顺序不一致. 例子1: var res = []; function response(data) { res.push( data ); } // ajax(..)是某个库中提供的某个Ajax函数 ajax( "http://some.url.1", response );

随机推荐