【计时器倒计时10s按时间间隔调接口-setTimeout和setInterval】
setTimeout和setInterval的用法与区别详解
-
- 简述
- setTimeout()函数
- setInterval()函数
- 新年倒计时案例
- 项目场景使用
简述
setTimeout()和setInterval()函数是JavaScript中两个很重要的关于"时间的函数"
setTimeout(): 该函数能够按照设定的时间值延迟执行其中的事件。
setInterval(): 该函数能够按照设定的时间值作为间隔，周期性的执行其中的时间。
setTimeout()函数
setTimeout(function,times);一个函数和一个int值，函数表示延迟一段时间后要执行的函数体，int值就是我们说的这段时间
setTimeout(function(){
alert("hello,setTimeout()");
}, 1000);
//运行后，会在延迟1s后执行函数体, 弹出一个弹框，其中1000的单位是毫秒！
PS: 执行这段代码，结果是什么？
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
alert(i)
}, 1000)
}
输出了5 5 5 5 5，所以这是为什么呢？因为setTimeout()是一个异步执行函数，它里面的函数体，并不会在每一次执行的时候立刻运行，而是会丢进执行队列中，等待"主线任务"全部完成，才会执行它。
于是在5次for循环后，i的值是5，传进去，弹出了5个5。
两种解法：
解一：使用let
for (let i = 1; i <= 5; i++) {
setTimeout(function () {
alert(i)
}, 1000)
}
使用let之后，也没有改变执行机制，仍然是最后执行的alert()，但是let可以在每一次把更新的变量i传进函数体内，也就是每一次的i加1之后，会把这个新值放进队列中对应的函数内，于是就解出了这个问题。
解二：定义一个外部变量:这个变量每一次会被放入队列中，依旧不改变本身的执行机制
var j = 1;
for (i = 1; i <= 5; i++) {
setTimeout(function () {
alert(j)
j++;
}, 1000);
}
第二种做法，更容易被别人看懂，也更适合做项目时实际使用。
setInterval()函数
setInterval(function,times);没那么复杂了，但是它的功能确实很强大的;以设置的times为间隔来循环重复function
//运行之后，每过1秒，就会弹出一个弹窗，显示这段话。
setInterval(function(){
alert('hello,setInterval()');
}, 1000);
Q:可以在某个特定的时机让它不再循环执行了吗？
A:需要定义一个setInterval()函数的对象，我们一般取名叫：timer
var i = 5;
var timer = setInterval(function(){
i --;
if(i < 0){
clearInterval(timer);
}
alert('i');
}, 1000);
给setInterval创建了一个对象叫timer，在外部我们定义了另一个变量i，之后我们每一次执行Interval内的函数时，就让 i-1 ，减到0以下，清除定时器:clearInterval(timer);
新年倒计时案例
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新年倒计时</title>
<style>
body {
background-image: url(./1.jpg);
}
</style>
</head>
<body>
<h1 id="xin-nian" style="text-align: center;margin-top: 250px;font-size: 50px;"></h1>
<script>
var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {
element.innerHTML = "新年倒计时：" + clock + " !";
console.log(clock)
clock--;
if (clock < 0) {
clearInterval(timer);
//缓冲下，延迟0.5s显示，让数字0显示后再提示文字
setTimeout(function () {
alert("新年快乐！")
}, 500)
}
}, 1000);
</script>
</body>
</html>
PS:向html写入内容有一个小延迟，会导致最后倒计时0这个数字没被写进去就会弹窗，因此我们要在倒计时最后一秒，用setTimeout()做一个小缓冲
项目场景使用
需求：页面虚化进度条10秒倒计时，每秒去读取ww_cxhtzt表是否返回了数据，判断已有数据则停止倒计时
1、倒计时循环查
var row = cxhttjData.getCurrentRow();
var clock = 10;//10s
var timer = null;
var self = this;
timer = setInterval(function () {
var element = self.getElementByXid("span15");
$(element).text(clock);
if (clock == 7 || clock == 4) {
// 查数据 倒计时7s、4s查一次
if (self.clickedFlag.get() == true) {
cxhtztData.setFilter("cusFilter", "WW_CXHTZT.QQCS='" + row.val("QQCS") + "'");
} else {
cxhtztData.setFilter("cusFilter","");
}
cxhtztData.refreshData();
if (cxhtztData.getCount() > 0) {
clearInterval(timer);
callback();
}
}
if (clock < 0) {
clearInterval(timer);
setTimeout(function () {
// 查数据 倒计时0s查一次，延时半秒让界面显示0s
if (self.clickedFlag.get() == true) {
cxhtztData.setFilter("cusFilter", "WW_CXHTZT.QQCS='" + row.val("QQCS") + "'");
} else {
cxhtztData.setFilter("cusFilter","");
}
cxhtztData.refreshData();
if (cxhtztData.getCount() > 0) {
callback();
}
}, 500);
}
console.log(clock)
clock--;
}, 1000);
2、显示遮罩层
-
就是一个固定定位的标签，贴在整个窗口上，背景色为半透明的黑色~！
-
还可以借机去掉窗口的滚动条，这样就连窗口滚动都不可以。
-
有的遮罩层点击后，还可以去掉它。
这里利用一个按钮来动态生成遮罩层：
<button id="btn" type="button">点击弹出遮罩层</button>
//CSS部分
.mask{
left: 0;
top: 0;
bottom:0;
right:0;
position: fixed;
z-index: 99999;
background: rgba(0,0,0,0.6);
}
/* 标签要用的样式 ，跟窗口一样大，内容超出隐藏，避免出现滚动条 */
.htmlMask{
height: 100%;
width: 100%;
overflow: hidden;
}
//JS部分
let btn = document.getElementById("btn");
/*
* 生成 mask
* */
let createMask = ()=>{
// 如果 mask 已经存在了，就不用再创建mask了
if( document.getElementById("mask")){
return true;
}
let mask = document.createElement("div");
mask.id = "mask";
mask.className = "mask";
// 把 mask 添加到body 里。
document.body.appendChild( mask );
// 控制 标签的样式
document.documentElement.classList.add("htmlMask");
// 点击mask，就去掉mask
mask.addEventListener("click", deleteMask );
};
/*
* 删除 mask
* */
let deleteMask = ()=>{
let mask ;
// 如果 mask 存在，就删除
if( mask = document.getElementById("mask")){
// 移除 mask 上的点击事件
mask.removeEventListener("click", deleteMask );
// 删除 mask 标签
mask.parentNode.removeChild( mask );
// 去掉 标签的特定样式
document.documentElement.classList.remove("htmlMask");
}
};
btn.addEventListener("click",function(){
createMask();
});
DOM 中：
document.body 表示body 标签
document.documentElement 表示 标签
PS:可以界面中设计"
例：
<div xid="maskdiv" id="mask" class="mask" bind-visible=" $model.showLoading.get()"
style="display:none;"/>
案例：15分钟倒计时
<html>
<head>
<meta charset="UTF-8">
<title>15分钟倒计时</title>
</head>
<body>
<div id="timer" style="color:red"></div>
</body>
<script type="text/javascript">
var oBox= document.getElementById('timer');
var maxtime = 6 * 60;
function CountDown() {
if (maxtime >= 0) {
minutes = Math.floor(maxtime / 60);
seconds = Math.floor(maxtime % 60);
msg = "距离结束还有" + minutes + "分" + seconds + "秒";
oBox.innerHTML = msg;
if (maxtime == 5 * 60)alert("还剩5分钟");
--maxtime;
} else{
clearInterval(timer);
alert("时间到，结束!");
}
}
timer = setInterval("CountDown()", 1000);
</script>
</html>