An explanation of JS timer and closure issues-JS Tutorial-php.cn

An explanation of JS timer and closure issues

jacklove

Release： 2018-05-21 11:19:59

Original

1801 people have browsed it

This article explains the JS timer and closure issues.

What is a closure? What is its role?

If a function has permission to access variables inside another function, then this internal function can be called a closure.

Function:

Be able to access local variables inside another function

Always keep the values of these variables in memory

What is the role of setTimeout 0

It is equivalent to placing this code at the end of the execution code and executing it immediately. This code will be executed immediately after all the codes have been executed.

How much does the following code output? Modify the code so that fnArr [i]() outputs i. Use more than two methods

方法一：    var fnArr = [];    for (var i = 0; i < 10; i ++) {
      (function(i){
        fnArr[i] =  function(){            return i;
        };
      } )(i);
    }    console.log( fnArr[3]() );

Copy after login

方法二：    var fnArr = [];    for (var i = 0; i < 10; i ++) {
      (function(){        var a = i;            //取消参数，还是运用闭包将i赋值给a
        fnArr[i] =  function(){            return a;
        };
      } )();
    }    console.log( fnArr[5]() );

Copy after login

Use a closure to encapsulate a car object. You can obtain the car status in the following ways

var Car = (function(){  var speed = 0 ;  function setSpeed(n){
    speed = n ;
  }  
  function getSpeed(){    console.log(speed) ;
  }  
  function accelerate(){
   speed += 10 ; 
  }  
  function decelerate(){
   speed -= 10 ;
  }  
  function getStatus(){    if(speed>0){      console.log(&#39;running&#39;);
    }    if(speed===0){      console.log(&#39;stop&#39;);
    }
  }  
  return {    setSpeed:setSpeed,    getSpeed:getSpeed,    accelerate:accelerate,    decelerate:decelerate,    getStatus:getStatus,
  };
  
})();

Copy after login

Car.setSpeed(30);
Car.getSpeed(); //30Car.accelerate();
Car.getSpeed(); //40;Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20Car.getStatus(); // &#39;running&#39;;Car.decelerate(); 
Car.decelerate();
Car.getStatus();  //&#39;stop&#39;;//Car.peed;  //error

Copy after login

Write a function using setTimeout to simulate the function of setInterval

var a= 0;function intv(){
    setTimeout(function (){    console.log(a++);          
    intv();                //在子函数内调用父函数形成循环
  },1000);               //1秒后执行}
intv();              //执行父函数

Copy after login

Write a function to calculate the minimum time granularity of setTimeout

function num(){  var i =0;  var start= Date.now();  //获取当前时间毫秒赋值为start
  var clock = setTimeout(function(){  //为匿名函数设置定时器立即执行
    i++;                     //i每次+1
    if(i === 1000){           //条件为i执行1000次
      clearTimeout(clock);       //则取消定时器
      var end = Date.now();      //获取执行后时间毫秒赋值为end
      console.log((end-start)/i); //执行后时间-执行前时间再除以次数输出结果 
    } else{
    clock = setTimeout(arguments.callee,0)  //不到1000次再次执行此匿名函数
    }
  },0)
}
num();

Copy after login

What is the output result of the following code? Why?

var a = 1;
setTimeout(function(){
    a = 2;    console.log(a);
}, 0);     //这里使用setTimeout 0,此代码最后执行,所以最后输出2var a ;console.log(a);   //输出为1a = 3;console.log(a);   //输出为3输出结果为：132

Copy after login

What is the output result of the following code? Why?

var flag = true;
setTimeout(function(){
    flag = false;
},0)        //此代码放置最后while(flag){}    //flag为true，代码在这里陷入无限循环   console.log(flag);

Copy after login

The output result is:
Empty, trapped in an infinite loop

What is the output of the following code? How to output delayer: 0, delayer:1... (implemented using closure)

for(var i=0;i<5;i++){
    setTimeout(function(){         console.log(&#39;delayer:&#39; + i );
    }, 0);            //此代码放置最后执行，i已变为5，输出delayer：5；
    console.log(i);   //循环输出 0，1，2 ，3 ，4}
for(var i=0;i<5;i++){
  (function(i){    function set(i){        console.log(&#39;delayer:&#39; + i );    
    }    return set(i);
  })(i); 
}

Copy after login

The result is:

"delayer:0""delayer:1""delayer:2""delayer:3""delayer:4"

Copy after login

This article explains the JS timer and closure issues, and more For more related content, please pay attention to php Chinese website.

Related recommendations:

How to use front-end js to modularize require.js

A picture implemented with CSS Completed button example

The above is the detailed content of An explanation of JS timer and closure issues. For more information, please follow other related articles on the PHP Chinese website!