定时器
JavaScript提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。
setTimeout()
setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
var timerId = setTimeout(func|code, delay)
上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
上面代码的输出结果就是1，3，2，因为setTimeout指定第二行语句推迟1000毫秒再执行。
通常情况下我们都使用函数的形式
function f(){
console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
<input type="button" onclick="clearInterval(timer)" value="stop">
<script>
var i = 1
var timer = setInterval(function() {
console.log(2);
}, 1000);
</script>
上面代码表示每隔1000毫秒就输出一个2，直到用户点击了停止按钮。
clearTimeout()，clearInterval()
setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
运行机制
setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。
setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f,0)，那么不会立刻执行
setTimeout(f,0)将第二个参数设为0，作用是让f在现有的任务（脚本的同步任务和“任务队列”中已有的事件）一结束就立刻执行。也就是说，setTimeout(f,0)的作用是，尽可能早地执行指定的任务。
setTimeout(function (){
console.log("你好！");
}, 0);
setTimeout(function() {
console.log("Timeout");
}, 0);
function a(x) {
console.log("a() 开始运行");
b(x);
console.log("a() 结束运行");
}
function b(y) {
console.log("b() 开始运行");
console.log("传入的值为" + y);
console.log("b() 结束运行");
}
console.log("当前任务开始");
a(42);
console.log("当前任务结束");
插入两个CSS操作的介绍
window.getComputedStyle()
getComputedStyle方法接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
var div = document.getElementsByTagName('div')[0];
window.getComputedStyle(div).backgroundColor;
我们以前使用div.style也可以取到css的样式
但是只能取到行内css样式， 也就是我们定义在style属性里的
<div style="width: 300px;"></div>
<script>
var div = document.getElementsByTagName('div')[0];
console.log(div.style.width);//300px
console.log(div.style.height);//''
</script>
getComputedStyle()获得的是计算之后的样式
元素上currentStyle属性
这个属性跟window.getComputedStyle(div)一样, 是一个包含该节点最终样式信息的对象
var div = document.getElementsByTagName('div')[0];
div.currentStyle.width;
跟window.getComputedStyle区别:
- window.getComputedStyle: IE6 7 8 不兼容
- currentStyle: 标准浏览器不兼容
兼容性写法：
var div = document.getElementsByTagName('div')[0];
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
var currentStyle = getComputedStyle(obj);
return currentStyle[attr];
}
}
alert(getStyle(div, 'height'));
注意事项:
- 复合样式（不要获取）
//IE
alert( getStyle(div, 'background') ); //undefined
//chrome
alert( getStyle(div, 'background') );//rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
//firefox
alert( getStyle(div, 'background') );//''
属性值为驼峰命名
不要使用获取的颜色作比较
//IE
alert( getStyle(div, 'backgroundColor') ); //red
//chrome
alert( getStyle(div, 'backgroundColor') );//rgb()
//firefox
alert( getStyle(div, 'backgroundColor') );//red
- 不要获取未设置样式的值
//IE
alert( getStyle(div, 'marginTop') ); //auto
//chrome
alert( getStyle(div, 'marginTop') );//0px
//firefox
alert( getStyle(div, 'marginTop') );//0px
因为每个浏览器的默认样式不一样
还有什么东西不能拿来做判断
- 所有相对路径
img src; href等等
<img src="./img/1.png" alt="">
<script>
var img = document.getElementsByTagName('img')[0];
img.src == './img/1.png';//false
//它返回的是一个觉得路径
console.log(img.src);//file:///C:/Users/Administrator/Desktop/img/1.png
</script>
- 颜色值
兼容性问题 不同的浏览器可能返回颜色关键字(red), rgb, 或者#111
- innerHTML的值
因为空格换行什么的
