【计时器倒计时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;//10svar 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查一次，延时半秒让界面显示0sif (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，就去掉maskmask.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:可以界面中设计"",用上文的css即可,js中用变量控制div的显示隐藏，定时器显示 时遮罩层显示，定时器隐藏 时遮罩层隐藏
例：
<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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！