JavaScript学习之setTimeout
《JavaScript权威指南》第四版中说“window对象方法setTimeout()用来安排一个JavaScript的代码段在将来的某个指定时间运行”。
setTimeout(foo,i); // foo是回调函数，i是延时时间
注意“将来”一词，setTime会把foo函数放到队列中，当线程空闲的时候，JavaScript才会去执行队列里的事件。
看下面的代码：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> window.onload = function () {
var a = 0;
function one() {
for (var i = 0; i < 10; i++) {
console.log(i);
setTimeout(function(){
console.log(a);
a += i; },0);
}; }
function two() {
alert(a);
}
one();
setTimeout(two,0);
}
</script>
</head>
</html>
这里其实one函数看着像是会正常把a从0加到9，然后alert出来。
但实际上的alert结果是100，为什么？
one函数的for循环是不会因为setTimeout停下的，它遇到setTimeout的时候只会把里面的回调函数放到队列里面去，然后继续i++。等执行完所有的for循环才会去执行刚才放到队列的函数。因为循环完了所以i是10，总共有10个相同的a+=i;操作的函数被调用，最后a的结果就变成了100了。
但是其实上面代码有部分我还是不明白，就是如果setTimeout(two,0);改成setTimeout(two(),0);的话，alert的结果就变成了0。
setTimeout的第一个参数是函数对象，如果变成two()，那回调函数就变成了two的返回值，因为需要用到two的返回值，two函数就会直接执行，在执行的时候a没有发生任何变化，所以输出就是0了。
附上setTimeout不带参数的一些写法：
setTimeout("alert('3秒后执行我')",3000); // 直接把执行语句放在双引号里当参数
setTimeout(function(){alert("3秒后执行我");},3000); // 直接把一个包含执行语句的匿名函数当参数
setTimeout(two,3000); // 把指针当参数
setTimeout("two()",3000); // 把two()函数放在双引号里当参数，相当于用eval()函数来解析他
setTimeout(function(){two();},3000); // 把要执行的函数放在一个匿名函数里当参数
带参数的写法：
setTimeout("two('"+arg1+"',"+"'"+arg2+"',"+....+"')",3000); // 尽量不要用这一样，很容易弄错
setTimeout(two,3000,arg1,arg2....); // 第一个参数是指针，第二个是延迟执行的时间，后面紧跟着的是调用函数所执行的参数
setTimeout(function(){two(arg1,arg2...);},3000); // 直接把要执行的函数已经参数放在匿名函数里当setTimeout的第一个参数
JavaScript学习之setTimeout的更多相关文章
- JavaScript学习笔记-setTimeout应用
setTimeout应用 var ids = [];function foo1(i) { this.i = i; console.log('i = '+i); ids[0] = setTimeout( ...
- JavaScript学习之 倒计时
倒计时很常见,例如离XX活动还有XX天XX小时XX分XX秒,然后逐秒减少,实现很简单,我只是想记录这过程中的一点小坑. 先上代码: <html> <head> <meta ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习05 定时器
JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- JavaScript学习记录四
title: JavaScript学习记录四 toc: true date: 2018-09-16 20:31:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- JavaScript学习（3）：函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
随机推荐
- 用js创建标签
html部分: <div id="div_1"> <table id="tab"></table> </div> ...
- vscode, eslint, prettier, vetur冲突及解决
这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图: 2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...
- spring定时任务scheduler集群环境下指定运行服务器防止多服务器多次执行
使用spring的@Scheduler注解可以非常方便的启动一个定时任务,但是当服务部署在多台服务器上做负载均衡的时候,可能会出现重复执行的情况. 现在我们通过代码指定job只在某一台机器执行. 首先 ...
- 【转载】Linux Examination
原博地址:https://blog.csdn.net/weixin_42568655/article/details/94603660 (来自我的同学QiaoGuangtong大佬) Fundamen ...
- Luogu P3295 [SCOI2016]萌萌哒(并查集+倍增)
P3295 [SCOI2016]萌萌哒 题面 题目描述 一个长度为 \(n\) 的大数,用 \(S_1S_2S_3 \cdots S_n\) 表示,其中 \(S_i\) 表示数的第 \(i\) 位, ...
- Leetcode147. Insertion Sort List对链表进行插入排序
对链表进行插入排序. 从第一个元素开始,该链表可以被认为已经部分排序(用黑色表示). 每次迭代时,从输入数据中移除一个元素(用红色表示),并原地将其插入到已排好序的链表中. 插入排序算法: 插入排序是 ...
- Leetcode448.Find All Numbers Disappeared in an Array找到所有数组中消失的数字
给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不 ...
- bzoj 3231 [Sdoi2008]递归数列——矩阵乘法
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3231 矩阵乘法裸题. 1018是10^18.别忘了开long long. #include& ...
- loj6402 校门外的树(dp，多项式求逆)
https://loj.ac/problem/6402 庆祝一下,,,第一个我自己做出来的,,,多项式的题(没办法,我太弱 虽然用了2个小时才想出来,但这毕竟是0的突破…… 首先声明,虽然我写的题解很 ...
- 关于网上大量对Vue双向绑定的错误理解
对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...