javascript基础 --定时器，闭包

JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。

创建var t1 = setTimeout(function(){},delay) 取消clearTimeout(delay1)取消对应的定时器。

创建var t2 = setInterval(function(){},delay) 取消clearInterval(delay2)取消对应的定时器。

 注意：

实际生成一个定时器，返回的是该定时器的序号，通过变量可以保存该定时器序号，以便后续取消。

创建第一个定时器，序号对应1，后续创建定时器，会在这个基础上递增1.。

setTimeout:在delay时间后，执行函数

setInterval:在delay时间后执行函数，之后一致循环，然而不管函数的执行时间长还是短，依旧是等待来回的的时间（delay）来循环。

setTimeout(function(){},0)表示 等待其他事件完成之后，才开始执行，会排在队列的后面。

闭包

闭包实际就是运用了函数具有局部作用域的能力来实现的,通常见到是函数中包含一个函数，并且return出来一些接口。

实际上就，在函数运行完之后，内部的函数是要被销毁的而且函数中有与外部同名的变量的时候，会优先采用自己内部的变量，达到避免命名冲突，而且外部函数访问不到内部函数的变量（作用域链），利用函数的这几个特点，实现了闭包（实际上闭包就是利用函数的特征来实现的）

看看一个例子：

var arr = [];
for (var i = 0; i < 10; i++) {
  arr[i] = function () {
    console.log(i);
  };//因为循环完之后，i变成了10，函数没有声明i,只能从外部访问了
}

var arr2 = [];
for(var j=0;j<10;j++){
  arr2[j] = (function(i){
    return function(){
      console.log(i);
    }
  })(j)
}//这里j当作参数传了进去，i=j,之后return的函数访问了上一层的j，因为内部没有。所以当函数执行完之后，j的值被保存了下来，因为return出来的函数要用到，所以没被销毁。

 代码练习

下面的代码输出多少？修改代码让fnArr[i]() 输出 i。使用两种以上的方法

//原代码   
 var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //

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

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

写一个函数使用setTimeout模拟setInterval的功能

function useSetTimeoutAnalogSetIntv(func,delay){
  setTimeout(function(){
    func();useSetTimeoutAnalogSetIntv(func,delay);  
  },delay)
   
}
useSetTimeoutAnalogSetIntv(function(){
  console.log(1);
},1000);  

下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
    console.log(i);
}

实现：
方法1：for(var i=0;i<5;i++){
    (function(num){
      setTimeout(function(){
         console.log('delayer:' + num );
    }, 0);
    })(i);
    console.log(i);
}

方法2：
for(var i=0;i<5;i++){

      setTimeout((function(){
         console.log('delayer:' + i );
    })(), 0);

    console.log(i);
}

　　

转载于:https://www.cnblogs.com/cyrziwo/p/5699174.html