>>>>> 定时器

2017-05-18 本文已影响0人風隨風去

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的值

因为空格换行什么的