|
导读网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立... 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。 本篇文章给大家带来的内容是关于面试：JavaScript中的setTimeout到底是什么？，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在刷笔试题的时候，经常会碰到setTimeout的问题，只知道这个是设置定时器；但是考察的重点一般是在一个方法中包含了定时器，定时器中的打印和方法中打印的执行顺序问题，也许我说的有点儿难懂，下面就来看看setTimeout到底是什么吧！ 定时器的介绍 js中有哪些定时器？ 周期定时器：setInterval() 介绍 setInterval()是按照指定的周期来调用定时器，方法会不断的调用定时器，直到使用clearInterval()停止或者窗口关闭。 语法 setInterval(code,millisec,lang)
实例 通过setInterval实现时钟效果 <html>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
//每隔1秒执行一次clock方法
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<!-- 设置一个按钮，点击按钮即停止定时器 -->
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>效果图：
‘一次性’定时器：setTimeout()介绍??顾名思义，这个定时器只会执行一次，和setInterval()的区别就在这儿了，正是因为如此，setInterval()才需要使用clearInterval方法去取消定时器 语法??setTimeout(code,millisec,lang)????ps:每个参数的含义和setInterval()的均相同 实例??点击按钮3秒后弹出“Hello” <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script>
</body>
</html>效果图：
取消定时器介绍??使用计时器ID来取消计时器回调的发生，每个计时器都会返回一个id，是为了取消定时器的方法可以获取到相应的计数器。
实例//设置超时调用
var timeoutId = setTimeout(function (){
alert("hello World");
},1000);
//取消掉用的代码
clearTimeout(timeoutId);setTimeout的执行顺序到底是怎样的？??我们都知道，js是单线程语言，所有的多线程都是假象，都是单线程模拟出来的。浏览器是多进程的，而浏览器的内核（渲染进程）是多线程的。
??当主线程中的任务执行完毕后，也就是执行栈为空时，就会去任务队列中看有没有事件，如果有的话，就进入主线程执行，一直这样循环下去，这就是事件循环机制了，可以参照下面的图理解一下：
??也许你对事件循环机制的过程还是不太明白，那么我再解释清楚一点。例如下面这个例子： console.log('start')
setTimeout(function(){
console.log('setTimeout')
},5000)
console.log('end')执行过程：
??ps:
??如果看懂了上面的例子，就知道其实setTimeout的第二个参数其实并不能准确的控制多少秒后执行里面的函数，而是控制多少秒后将这个函数放进任务队列中；这样也就同样可以解释，为什么有时候明明设置的是2秒之后执行，却要等不止2秒（因为很有可能定时线程将回调函数放进任务队列后，主线程还在执行执行栈中的任务，需要执行栈中的任务全部执行完后才会去任务队列中取任务）。 setTimeout基础篇??这一部分主要是针对在事件循环机制中setTimeout调顺序进行举例子，如果能够轻松的将例子看懂，就说明你是真的懂了事件循环机制的一部分，为什么说是一部分呢，因为还有一个宏任务和微任务的知识点还没有涉及到，后面的进阶篇就会涉及到啦！ 例1 console.log('start')
setTimeout(function(){
console.log('setTimeout')
},0)
console.log('end')打印结果：（如果前面看懂了的同学应该就会明白为什么）
分析：其实和上面那个例子时一样的，只是这个0会给我们一种会立即执行的假象，这个0是说明定时器线程会立即将回调函数放进任务队列而已，主线程还是会将执行栈中的两个同步任务执行完成后再去任务队列中取任务，所以执行顺序和这里的秒数无关。而且即使执行栈为空，也不会0秒就执行，因为HTML的标准规定，setTimeout不超过4ms按照4ms来计算。 例2 console.log('start')
setTimeout(function(){
console.log('setTimeout')
}(),0)
console.log('end')打印结果：（仔细对比与例1的区别）
分析：细心的同学会发现，我将回调函数改成了立即执行函数，就改变了执行的顺序。首先我们需要明确的是setTimeout的第一个参数是指函数的返回值，这里回调函数为立即执行函数时，返回值就是undefined了，所以会直接执行立即执行函数，也就是立即打印setTimeout，而真正的setTimeout函数就相当于没起作用。 例3setTimeout(() => {
console.log('setTimeout')
},3000)
sleep(10000000)//伪代码，表示这个函数要执行很久很久打印结果： setTimeout进阶篇??这一部分相对于基础篇，加上了作用域以及其他也是比较难以理解的东西，可能还需要补充一些其他知识才会明白，我会尽量讲清楚，也会把我看的参考文章放在下面。 难度：O问题：以下代码输出的是什么？ for(var i = 0;i < 5;i++){
console.log(i)
}答案：没错，你没有看错，就是一个简单的循环，就像你想的那样，连续输出0,1,2,3,4 难度：OO问题：以下代码输出的是什么？如果把时间改为1000*i输出的又是什么？ for(var i = 0;i < 5;i++){
setTimeout(function(){
console.log(i)
},1000)
}答案： 难度：OOO问题：如果想输出0,1,2,3,4应该怎么改？ 解决方案1：使用es6中let代替var for(let i = 0;i < 5;i++){
setTimeout(function(){
console.log(i)
},1000*i)
}解决方案2：使用闭包 for(var i = 0;i < 5;i++){
(function(i){
setTimeout(function(){
console.log(i)
}, 1000 * i)
}) (i)
}延伸：将代码变成下面这样会输出什么？（去掉匿名函数中的i） for (var i = 0; i < 5; i++) {
(function () {
setTimeout(function () {
console.log(i)
}, i * 1000)
})(i);
}解决方案3：将回调函数改成立即执行函数 for (var i = 0; i < 5; i++) {
setTimeout((function (i){
console.log(i);
})(i), i * 1000)
}难度：OOOO??这一部分会涉及到promise，事件循环机制，宏任务和微任务的内容，算是比较难的部分了，如果觉得比较难看懂，最好先去补一下基础知识，我这里就简单介绍一下。 promise对象我这里就不详细讲了。 宏任务和微任务
问题：以下代码输出的是什么？ setTimeout(function () {
console.log(1)
}, 0);
new Promise(function executor(resolve) {
console.log(2);
for (var i = 0; i < 10000; i++) {
i == 9999 && resolve();
}
console.log(3);
}).then(function () {
console.log(4);
});
console.log(5);答案：（是不是很懵，为什么会是这样，下面看我的分析你就知道了）
分析：
宏任务微任务与同步事件异步事件的关系： 以上就是面试：JavaScript中的setTimeout到底是什么？的详细内容，更多请关注php中文网其它相关文章！ 网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。 |
温馨提示：喜欢本站的话，请收藏一下本站！
本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！
本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(peng896066052@126.com),我们会及时处理.
Copyright © 2018-2020 雨林木风下载站
