JS定时器的使用

JS定时器的使用

什么是定时器?

定时器就是由JS提供了一些原生方法来实现延时去执行某一段代码。

定时器的分类

一、
第一种是一次性的:
setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段
使用方法:var timer=setTimeout(fun,毫秒数)
清除的方法:clearTimeout(timer)
二、
第二种是周期性的:
setInterval: 以固定的时间间隔重复调用一个函数或者代码段
使用方法:var timer=setInterval(fun,毫秒数)
清除的方法:clearInterval(timer)

例:

//一次性
var timeoutId = window.setTimeout(fun[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
//timeoutId: 定时器ID
//fun: 延迟后执行的函数
//code: 延迟后执行的代码字符串,不推荐使用原理类似eval()
//delay: 延迟的时间(单位:毫秒),默认值为0
//param1,param2: 向延迟函数传递而外的参数,IE9以上支持
//周期性
var intervalId = window.setInterval(fun, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
//intervalId: 重复操作的ID
//func: 延迟调用的函数
//code: 代码段
//delay: 延迟时间,没有默认值

使用案例

<body>
<h1>距离吃饭时间h1>
<span id="time">span>
<script type="text/javascript">
var oSpan=document.getElementById('time');
function task(){
      
var now=new Date();
var fangxue=new Date('当天的日期 17:30:00');
var s=parseInt((fangxue-now)/1000);//总共的秒数
if(s){
      
var days=parseInt(s/3600/24);//天数
var h=parseInt(s/3600%24);//小时数
var m=parseInt(s/60%60);//分钟
var ss=parseInt(s%60);//秒数
oSpan.innerHTML=`${
        days}${
        h}小时${
        m}分钟${
        ss}秒`//拼接
}else{
      
clearInterval(timer);
oSpan.innerHTML="恰饭了"
}
}
var timer=setInterval(task,1000)//每过一秒执行一次,并且用timer接收
script>
body>

你可能感兴趣的:(js基础,js)