简单说下js闭包之setTimeout

时间:2021-07-27 15:25:51

今天写代码的时候发现  网页上很多弹窗需要自动关闭

倒计时5秒之后用户无操作就关闭了,(angular 框架),代码如下,一:

        for(var i=5;i>0;i--){
            setTimeout((function(i){        
                return function(){
                    $scope.upstate="上传失败!"+(5-i)+"秒后本窗口关闭";    
                    //$scope.upclosed();    
                    //console.log($scope.upstate);
                    $scope.$apply();
                    //console.log(new Date().getTime());                    
                    if(i==5){                        
                        $scope.upclosed();            
                    }                    
                }
            })(i),i*1000);
        }

输出结果是:

简单说下js闭包之setTimeout

二: 稍加改动,去掉函数(),如下所示

   for(var i=5;i>0;i--){
            setTimeout(function(i){        
                return function(){
                   // $scope.upstate="上传失败!"+(5-i)+"秒后本窗口关闭";  
                window.upstate="上传失败!"+(5-i)+"秒后本窗口关闭";                    
                    //$scope.upclosed();    
                    console.log(window.upstate);
                    //$scope.$apply();
                    console.log(new Date().getTime());                    
                    if(i==5){                        
                       // $scope.upclosed();            
                    }                    
                }
            }(i),i*1000);
        }

依然能够正常使用

三: function(i){}(i) 两个i都不能少 ,少了第一个  i的值会变成全是5,但是依然能够按5,4,3,2,1的时间顺序输出5

少了第二个 i 的值会变成NAN

四:换一种方法 将整个setTimeout 都封起来

        for(var i=5;i>0;i--){
        
        (function(i){
        
            setTimeout(function(){       
               
                   // $scope.upstate="上传失败!"+(5-i)+"秒后本窗口关闭";  
                    window.upstate="上传失败!"+(5-i)+"秒后本窗口关闭";                    
                    //$scope.upclosed();    
                    console.log(window.upstate);
                    //$scope.$apply();
                    console.log(new Date().getTime());                    
                    if(i==5){                        
                       // $scope.upclosed();            
                    }                    
                },i*1000);
        })(i)
    
    }

也是 可以的 这个时候(function(){}())的最外层()不能去掉的