关于js函数中存在异步的情况下的变量的分析

Posted 2020-11-02 T&Y

　　javascript语言是一门“单线程”的语言，不像java语言，类继承Thread再来个thread.start就可以开辟一个线程，所以，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程。但是存在异步的情况，即使用setInterval，setTimeout，和ajax异步请求的时候。那么在函数中存在异步的情况下变量和函数本身是什么样的呢？下面由一个例子入手：

例子：

(function(){
  var i=0;      //记录banner轮播的第多少页
  var oBtnWrapper=document.getElementById(‘btnWrapper‘);//banner所在的div
  var timer=setInterval(function(){
    btnListInitial(i);  //实现轮播的核心函数
    i++;                //自动轮播的基础，每2秒i++，并传入核心函数
    if(i===4)i=0;        //轮播到第四张图片时，马上换回第一张
  },2000)
  oBtnWrapper.onmouseenter=function(e){e.stopPropagation();clearInterval(timer)}
  oBtnWrapper.onmouseleave=function(e){e.stopPropagation();timer=timer=setInterval(function(){
    btnListInitial(i);
    i++;
    if(i===4)i=0;
  },2000)}
}())

　　上面是一个实现banner的轮播自执行函数，在这之前我并未意识到函数中的变量i可以一直存在内存中，以此来让setInterval（function（）{......}）中的代码语句：i++; //自动轮播的基础，每2秒i++，并传入核心函数 if(i===4)i=0;起作用，一般情况下，函数执行之后，其变量应该被回收

而不应该存在内存中；但是，但是，但是在这个函数中存在一个异步的情况（setInterval），因此在函数执行后setInterval中的函数被反复执行，setInterval中的函数的i变量来至外部的自执行函数（function（）（）），所以这个自执行函数一直留在内存中。