JavaScript基础学习--10 return、定时器基础

Demos：   https://github.com/jiangheyan/JavaScriptBase 

 

一、return

     1、返回值：数字、字符串、布尔、函数、对象（{}、[]、元素、null）、未定义

     2、return值==fn();

function fn(a){
     return function (b){
              alert(a+b);      
          }
}
alert(fn())     //function (b){ alert(a+b);}
alert(fn(10)(20))     //30 

     3、所有函数默认返回值：undefined

     4、return后面所有代码不执行

 

二、arguments

     1、实参的集合

fn(1,2,3);
functon fn(){
     alert(arguments);     //[object arguments]          
     alert(arguments.length);
     alert(arguments[0]);
}

     2、当函数的参数个数无法确定时，用arguments

     3、arguments可读可写，arguments[0] = 123;

 

三、getComputedStyle、currentStyle     （只能获取，不能修改样式！！！）

     1、获取计算机（浏览器）计算后的样式

          1.1     兼具复合样式（eg. background），所以最好不要用复合样式名词获取（可以获取单一样式），可以写成  id.getComputedStyle('backgroundColor');     // red |  rgb(xxx,xxx,xxx);     --->不要用此作为判断条件

          1.2     不要获取未设置的样式：因为不兼容（这是浏览器计算的值，每个浏览器计算方式都不一样）

          1.3     不要有空格

     2、window.getComputedStyle(id,canshu).width;     //IE6、7、8不兼容，标准浏览器兼容     //canshu是FF4.0以下中的bug（任何参数都行）

     3、id.currentStyle.width                        //标准浏览器不兼容，IE6、7、8兼容

     4、检测兼容性：

          4.1     版本检测法

          4.2     属性判断法

//getComputedStyle、currentStyle     并解决获取样式兼容性问题
 
if(id.currentStyle){     //属性判断法：判断是否认得该属性
     id.currentStyle.width;     
}else{
     id.getComputedStyle(id.width);
}

     5、获取行间样式（style属性只能获取行内样式）封装方法：（注意：不能用点操作法，只能用 [ ] 因为  js中允许所有（.）替换成（【】），且（.）后面的值无法修改（必须是非变量）， ）

function getStyle(obj, attr){
     return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr];     //null是兼容FF4.0以下中的bug
}
 
var width = parseFloat(getStyle(oItem, 'width'));     //获取到的是带PX单位的值，所以需要用parseFloat---->最后设置dom.style.width = width + 'px';     //注意单位的回加

 

注：dom.style.attr 只能获取行内样式，嵌入样式和外联样式不能用style属性获取！此时用getComputedStyle || currentStyle 

 

四、setInterval 定时器     重复执行

     1、setInterval( function, time);     //时间以毫秒为单位，最好大于14毫秒，太小没有意义，浏览器也没有这个快响应

     2、clearInterval(timer);     //timer是定时器名称

//清除定时器法一：
var timer = setInterval(function, time);
clearInterval(timer);
 
//清除定时器法二：
var timer = setInterval(function(){
     ......
     clearInterval(timer);
}, time);

 

     3、定时器如果是由事件调用（用户操作），那么原则：先关后开，预防用户多次快速点击造成定时器叠加产生的bug

var arrUrl = ['images/1.jpg', 'images/1.jpg', 'images/1.jpg'];
var num = 0;
var timer = null;
id.onclick = function(){
     clearInterval(timer);
     timer = setInterval(function(){
          id.style.backgroung = 'url('+arrUrl(num)+')';
          num++;
          num %= arrUrl.length;
     }, 1000);
}

 

     4、函数调用方式

          4.1     直接调用 fn();

          4.2     事件调用 id.onclick = fn;                    （不能加括号，加括号是自己主动就执行了）

          4.3     定时器调用 setInterval(fn, 1000);      （不能加括号，加括号是自己主动就执行了）

 

五、setTimeout     执行一次

     1、setTimeout(function, time);

     2、clearTimeout(timer);     //timer 是定时器名称