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);//清除