定时器之window.setTimeout()

已于 2022-03-26 12:03:15 修改
阅读量2.2k 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： 前端 javascript
于 2022-03-26 11:40:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62962469/article/details/123743367
版权

setTimeout

语法规范：window.setTimeout(调用函数，延时时间)；

window在调用时可以省略。

这个延时时间单位是毫秒 ，如果省略默认的是0。

这里的调用函数可以直接写函数，也可以写函数名。还可以采取字符串，'函数名()'。三种形式，第三种不推荐。

页面中可能有很多的定时器，我们经常给定时器加标识符，用来区别不同的定时器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			setTimeout(function() {
				console.log('时间到了');
			}, 2000);
			
			function callback() {
				console.log('爆炸了');
			}
			setTimeout(callback, 3000);
            var time1 = setTimeout(callback, 3000);
			var time2 = setTimeout(callback, 5000);
		</script>
	</body>
</html>

5秒后自动关闭广告的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="images/ad.jpg" class="ad" >
		<script type="text/javascript">
			var ad = document.querySelector('.ad');
			window.setTimeout(function(){
				ad.style.display = 'none';
			}, 5000);
		</script>
	</body>
</html>

停止setTimeout()定时器。

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<button type="button">点击停止定时器</button>
		<script type="text/javascript">
			var btn = document.querySelector('button');
			var timer = setTimeout(function() {
				console.log('爆炸了');
			},5000);
			btn.addEventListener('click', function() {
				window.clearTimeout(timer);
			});
		</script>
	</body>
</html>

 window可以省略，里面的参数就是定时器的标识符。即我们给定时器所起的名字。

hcoke
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
理解javascript定时器中的setTimeout与setInterval
10-22
本文将深入讲解JavaScript中的两个重要定时器函数：`setTimeout`和`setInterval`。 首先，`setTimeout`函数用于在指定延迟时间后执行一次函数或代码片段。其基本语法如下： ```javascript var timeoutID = window....
BOM系列第一篇之定时器setTimeout和setInterval
09-01
// 输出0，因为this在定时器中被隐式绑定到全局对象（在浏览器中是window） ``` 要解决这个问题，可以将函数包裹在另一个函数中，或者使用`bind`方法显式绑定`this`： ```javascript setTimeout(function() { ...
window对象setTimeout()方法
qq_41344259的博客
03-31 613
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。语法格式可以是以下两种：setTimeout(要执行的代码, 等待的毫秒数),setTimeout(JavaScript 函数, 等待的毫秒数); 一个简单例子: <input type="text" id="displayBox" name="displayBox" value="0"...
前端面试知识点-JS定时器setTimeout和setInterval -【小咚 “面筋” 记】
咚の窝
11-16 683
文章目录前言一、JS两个计时器方法二、setTimeout三、setInterval四、利用setTimeout实现setInterval函数总结 前言 昨天事情太多了，导致没更新，回到宿舍都晚上11点了，宿舍11点断电。。。实验室项目和后端大佬对接了一晚上改了一堆bug，所以今天写两篇吧！算昨天的加上今天的，感觉博客有点拖欠了，不多说了，这次还是总结一下上次面试的问题，面试官问了我js定时器，我之前用过，但是没仔细深入了解过，所以今天总结一下吧！不至于下次面试再这么丢人了。。。 一、JS两个计时器方法
js事件循环、window.setTimeout 延迟执行
wangjun5159的专栏
02-09 1568
当执行setTimeout的线程执行完毕后，才会执行setTimeout的逻辑，这是因为，js引擎会将setTimeout放入单独的队列，当前线程执行完毕后，再执行timeout队列。 API setTimeout(func,ms,param1,param2); 举例 console.log("before...."); setTimeout(function(){ conso...
JS中setTimeout()的用法详解
热门推荐
郑长风
10-15 14万+
　1. SetTimeOut()             1.1 SetTimeOut()语法例子             1.2 用SetTimeOut()执行Function              1.3 SetTimeOut()语法例子              1.4 设定条件使SetTimeOut()停止              1.5 计分及秒的counter   2. Cle
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
11-23
废话不多说了，直接给大家贴代码了。...使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是 window.setTimeout()和window.setInterval。其中前者可以使一段
Window setTimeout() 方法
诚的博客
06-15 719
3 秒（3000 毫秒）后弹出 "Hello" : setTimeout(function(){ alert("Hello"); }, 3000);
window.setTimeout() 和window.setInterval() 的区别
laijieyao的专栏
12-23 8029
window.setTimeout() 和window.setInterval() 的区别
timeout的一些常规解决办法
08-24 3478
一般来说timeout并不会对服务器造成什么大的影响，但如果timeout过多导致进程文件描述符不够用或服务器端口不够用就需要注意了。 下面是一些常规的timeout解决办法。注意：不是长久之计 /etc/sysctl.conf net.ipv4.tcp_tw_reuse = 1表示开启重用。允许将TIME-WAIT sockets重新用于新的TCP连接，默认为0，表示关闭；（安...
Window setTimeout() 方法 Window setInterval() 方法 带参数使用
qlin_11的博客
10-13 135
不带参数使用请看： https://www.runoob.com/jsref/met-win-setinterval.html 带参数使用 setInterval(funcName, 3000，参数1，参数2); 注意 functionName只为名字 不要带（）
setTimeout中this指向全局windows
github_25505453的博客
03-02 1119
遇到一道题目foo = function(){ this.myName = "Foo function."; } foo.prototype.sayHello = function(){ alert(this.myName); } foo.prototype.bar = function(){ setTimeout(this.sayHello, 1000); } var f
window.setTimeout() 和window.setInterval() 使用说明
apple_wxs的专栏
11-27 339
setTimeout()的使用： 先看个例子 [code="js"] function test() { //100毫秒后执行sleep方法, 但这100毫秒程序不会等待，会继续执行setTimeout后面的代码 //效果就是 先alert(2); 后 alert(1); window.setTimeout("sleep()", 100); alert(2); } ...
setTimeout 进阶详解
知无涯
12-30 3621
一开始我以为当setTimeout的第二个参数设置为0是直接执行的， 但没想到结果却让我很以为， 打印出的结果是2,3,1 仔细一想确实是那么一回事，因为js是单线程的下面简单分析一下 setTimeout(function(){console.log(1)}) console.log(2) console.log(3) 我们都知道，JavaScript是单线程的，这意味着所...
一道面试题window.setTimeout(() => { test1() }, 0); test2(); test1和2 谁先执行，考察js的异步机制和事件循环基础
一个在全能之路上越走越远的男人。
01-10 432
答案： test2()先执行，然后再执行test1()。 原因：JS是单线程的，（PS: 虽然html5中提出了新的web标准，允许javascript 脚本创建多个线程，但子线程完全受主线程控制，且不得进行Dom操作，因此也并没有改变单线程的本质。） setTimeout属于异步操作，JS引擎会把setTimeout的操作加入到JS的任务队列中去，test2()属于主线程上的同步操作，优先执...
理解JavaScript 执行机制及异步回调（setTimeout/setInterval/Promise）
逸尘的专栏
11-24 5153
对于javascript执行机制的理解一直都是混淆不清。在面试或工作的过程中，也经常会遇到代码执行顺序或函数生命周期加载等类似的问题，这些多多少少都与javascript的执行机制相关。今天发现一篇很好的文章，欣喜之余，加以转载，供感兴趣的小伙伴学习，感谢作者分享。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出
结合例子理解Javascript的同步、异步、callback、seTimeout
duang_ang的博客
03-21 400
零、参考 下面两篇是尝试对异步有个了解，其实讲得还是有很多不清楚不规范的地方 https://www.cnblogs.com/sameen/p/7922627.html 【只看前言和浅谈异步，因为后面的异步原理讲得不是很清楚，然后看下面的文章理解浅谈异步里面的例子】 https://www.cnblogs.com/moxiaowohuwei/p/8438236.html 【第二点的例子看...
setTimeout回调函数为立即执行函数的情况
Sugarman0620的博客
08-25 1050
for (var i = 0; i < 5; i++) { setTimeout((function(i) { console.log(i); })(i), i * 1000); } setTimeout（）的回调函数是一个立即执行函数，改代码的运行结果是：立即打印出0，1，2，3，4，5为什么会立刻打印出i的值呢？从字面意思理解：立即函数就是立即...
window.setTimeout(function () { body_element.removeChild(newdiv); }, 0);
最新发布
07-15
window.setTimeout(function () { var newdiv = document.getElementById('newdiv'); // 假设"newdiv"是您想移除的元素 var body_element = document.body; // 获取body元素 body_element.removeChild(newdiv); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hcoke

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值