16定时器、延时器

16定时器、延时器

前言：

代码归类为同步代码和异步代码，同步代码在同步行列，异步代码归在异步行列中。js在执行代码时，先执行同步代码，再执行异步代码。

同步代码：

就是我们平常学到的代码，每一条语句按照从上到下的顺序执行，除了var声明的变量会提升，function声明的函数被提到上边之外。

异步代码：

过一段时间再执行：定时器、延时器

正文：

定时器

每隔多长时间执行一次

setIntervar( callback, timeout )---->设置定时器

callback 代表回调函数，—>在传实参的时候传的是一个函数

回调函数：把一个函数(a)作为实参传递给另一个函数(b),那么在函数b里边a就叫做回调函数 -> a是b的回调函数

timeout代表时间间隔

//setIntervar( callback, timeout )形式:
//一个倒计时
const count_down = document.querySelector('.count_down');
const christmas = new Date(2020,11,25,00,00,00);
let interim = () =>{
    const blank = christmas - new Date();//总毫秒数
    count_down.innerText = `${parseInt(blank/(24*60*60*1000))}天${parseInt( blank/(60*60*1000)%24 )}时${parseInt( blank/(60*1000)%60)}分${parseInt(blank/1000%60)}秒`;
}
interim();
setInterval(interim, 1000);

//直接写成函数的形式：
let num = 0;
const a = setInterval( () => {
    num++;
    console.log(num);
    if( num === 10 ){
        clearInterval(a);
    }
    return num;//num===10时，打断函数执行
}, 1000 );//每隔1s重新调用一下
console.log(a);//打印出这个定时器的序号

clearIntervar(定时器的序号)---->清除定时器

clearIntervar(1);

举例：让一个盒子水平移动200px

let num = 0 ;
const abc = setInterval( () => {
    if( num > 200 ) clearInterval(abc);
    box.style.transform = `translate(${num += 2}px)`
}, 1000 / 60 );//每隔16.666ms执行一次abc函数

延时器

隔多长时间才执行，只执行一次

setTimeout( callback, timeout ) ---->设置延时器

callback 代表回调函数，—>在传实参的时候传的是一个函数

timeout代表时间间隔

const ming = () => {
    console.log('ming');
};
const abc = setTimeout( ming, 1000 );//1s = 1000ms  -> 过一秒钟之后去执行小明
//如果去打印abc：
console.log(abc);//abc的值为1 1表示的是abc这个延时器他的序号
//序号是用来清除延时器或者定时器的 -> 只执行一次

clearTimeout(延时器的序号)---->清除延时器

const edg = setTimeout( () => {
     console.log('我不会再出现了')
}, 2000 );
clearTimeout(edg);//清除