js定时器

复习

• 函数创建

      function 函数名(){   
          var total = 10+20;
      }
  

• 调用函数

      函数名();
      函数名();
  

• 参数

      function sum(n,m){//形参
          var total = n+m;
      }
      sum(100,200);
      sum(100); 
      //形参未赋值,默认 undefined
  
  
      var a;
      console.log(a);
  
  

• 返回值

      function sum(n,m){//形参
          var total = n+m;
          // return total;
          console.log(111);
      }
      var t = sum(100,200);
      console.log(t);
  

  • 返回值默认值也是undfined

• arguments

       function sum(){//形参
          //arguments [10,20]    
      }
      sum(10,20);
  

• 函数不同形式

     命名函数: function sum(){       } 
     事件处理函数: ele.onclick = function(){   sum(10,20)      }
          ele.onclick = sum;
     对象的方法:
          var obj = {name:'ujiuye',age:18,eat:function(){          },aa:{x:,y:,}}
  

• this关键字

      1- 普通函数,this执行window
      2- 事件处理函数里面this指向触发事件的元素
      3- 对象方法里面的this,指向调用方法的对象 obj.eat()
  
  

• 作用域: 全局作用域 \ 私有作用域(函数作用域)

• 作用域链: 函数中变量查找机制,先从当前作用域查找,如果没有,依次向上级作用域查找,如果找到全局没有,报错

• 两种变量:全局变量\局部变量(在函数里面var 的和函数的形参)

• 预解析(变量提升):

  • 带var 先声明,不赋值(默认值undefined)

        console.log(a);//undefined
        var a = 10;
        console.log(a);//10
    
    

  • 带function 声明的同时赋值

        sum();
        function sum(){}
        fn();//报错
    
        var fn = function(){
    
        }
        fn();
    
    

• 样式操作

      设置:  ele.style.attr = val;
      获取:  ele.style.width 
             标准:  getComputedStyle(ele)[attr]
             ie:  ele.currentStyle[attr]
  
      function getCss(ele,attr){
         return ele.currentStyle == "unfdefined" ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
      }
  
      getCss(oBox,'width');
  
  

(一) 定时器

1- setTimeout : 等待一段时间执行function,只执行一次

       setTimeout(function(){},1000);

2- setInterval: 每隔一段时间执行function,重复执行

       setInterval(function(){},1000);

3- 清除定时器

• clearTimeout()

      var i = 0;
      var timer = setInterval(function(){
          //console.log('***'+timer);
          i++;
          if(i == 5){
              //clearInterval(1); //清除定时器传入参数是代表定时器的那个数字
              clearInterval(timer); //一般设置定时器时用变量接收一下,清除时传入变量名
          }
          console.log(i);
      },1000); 
  

• clearInterval()

  • 这两个方法技术上都可以清除两种定时器,但是为了区分,应该对应起来用

4- 定时器异步

• 定时器时js中的一种异步机制,永远会在同步代码之后运行

          setTimeout(function(){
              console.log(111);
          },0)
          console.log(222);
          //先输出222,再输出111