定時器
JavaScript提供定時執(zhí)行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數(shù)來完成。
setTimeout()
setTimeout函數(shù)用來指定某個函數(shù)或某段代碼，在多少毫秒之后執(zhí)行。它返回一個整數(shù)，表示定時器的編號，以后可以用來取消這個定時器。
var timerId = setTimeout(func|code, delay)
上面代碼中，setTimeout函數(shù)接受兩個參數(shù)，第一個參數(shù)func|code是將要推遲執(zhí)行的函數(shù)名或者一段代碼，第二個參數(shù)delay是推遲執(zhí)行的毫秒數(shù)。
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
上面代碼的輸出結(jié)果就是1，3，2，因為setTimeout指定第二行語句推遲1000毫秒再執(zhí)行。
通常情況下我們都使用函數(shù)的形式
function f(){
console.log(2);
}
setTimeout(f,1000);
// 或者
setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函數(shù)的用法與setTimeout完全一致，區(qū)別僅僅在于setInterval指定某個任務(wù)每隔一段時間就執(zhí)行一次，也就是無限次的定時執(zhí)行。
<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函數(shù)，都返回一個表示計數(shù)器編號的整數(shù)值，將該整數(shù)傳入clearTimeout和clearInterval函數(shù)，就可以取消對應(yīng)的定時器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
運行機(jī)制
setTimeout和setInterval的運行機(jī)制是，將指定的代碼移出本次執(zhí)行，等到下一輪Event Loop時，再檢查是否到了指定時間。如果到了，就執(zhí)行對應(yīng)的代碼；如果不到，就等到再下一輪Event Loop時重新判斷。這意味著，setTimeout指定的代碼，必須等到本次執(zhí)行的所有代碼都執(zhí)行完，才會執(zhí)行。
setTimeout的作用是將代碼推遲到指定時間執(zhí)行，如果指定時間為0，即setTimeout(f,0)，那么不會立刻執(zhí)行
setTimeout(f,0)將第二個參數(shù)設(shè)為0，作用是讓f在現(xiàn)有的任務(wù)（腳本的同步任務(wù)和“任務(wù)隊列”中已有的事件）一結(jié)束就立刻執(zhí)行。也就是說，setTimeout(f,0)的作用是，盡可能早地執(zhí)行指定的任務(wù)。
setTimeout(function (){
console.log("你好！");
}, 0);
setTimeout(function() {
console.log("Timeout");
}, 0);
function a(x) {
console.log("a() 開始運行");
b(x);
console.log("a() 結(jié)束運行");
}
function b(y) {
console.log("b() 開始運行");
console.log("傳入的值為" + y);
console.log("b() 結(jié)束運行");
}
console.log("當(dāng)前任務(wù)開始");
a(42);
console.log("當(dāng)前任務(wù)結(jié)束");
插入兩個CSS操作的介紹
window.getComputedStyle()
getComputedStyle方法接受一個DOM節(jié)點對象作為參數(shù)，返回一個包含該節(jié)點最終樣式信息的對象。所謂“最終樣式信息”，指的是各種CSS規(guī)則疊加后的結(jié)果。
var div = document.getElementsByTagName('div')[0];
window.getComputedStyle(div).backgroundColor;
我們以前使用div.style也可以取到css的樣式
但是只能取到行內(nèi)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)一樣, 是一個包含該節(jié)點最終樣式信息的對象
var div = document.getElementsByTagName('div')[0];
div.currentStyle.width;
跟window.getComputedStyle區(qū)別:
- window.getComputedStyle: IE6 7 8 不兼容
- currentStyle: 標(biāo)準(zhǔn)瀏覽器不兼容
兼容性寫法：
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'));
注意事項:
- 復(fù)合樣式（不要獲?。?/li>
//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
- 不要獲取未設(shè)置樣式的值
//IE
alert( getStyle(div, 'marginTop') ); //auto
//chrome
alert( getStyle(div, 'marginTop') );//0px
//firefox
alert( getStyle(div, 'marginTop') );//0px
因為每個瀏覽器的默認(rèn)樣式不一樣
還有什么東西不能拿來做判斷
- 所有相對路徑
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>
- 顏色值
兼容性問題 不同的瀏覽器可能返回顏色關(guān)鍵字(red), rgb, 或者#111
- innerHTML的值
因為空格換行什么的
