JS中的setTimeout()函数
1、setTimeout() 方法
setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式。返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行。
setTimeout(code, milliseconds, param1, param2, ...)
setTimeout(function, milliseconds, param1, param2, ...) //code|function:必需。要调用一个代码串,也可以是一个函数。 第三个及之后的参数:可选,传给setTimeout函数里面的函数作为他的参数(IE9 及其更早版本不支持第三个及之后的参数)。
setTimeout(function(){ alert("Hello"); }, 3000); //三秒之后执行函数
setTimeout(alertFunc, 3000); //三秒之后调用alertFunc函数
function alertFunc() {
alert("Hello!");
}
1.1、使用 clearTimeout() 方法阻止函数的执行
在setTimeout() 里面的函数执行之前可以使用 clearTimeout() 方法阻止 setTimeout() 里面的函数执行。
1.2、setTimeout() 的三个及之后的参数
第三个及之后的参数是setTimeout()函数的可选参数,是作为参数传给 setTimeout() 方法里面的匿名函数或者调用的函数,IE9 及其更早版本不支持第三个及之后的参数。
//IE9 及其更早版本不支持第三个及之后的参数
var alertFunc = function(a,b){console.log(a,b)};
setTimeout(alertFunc, 2000, "Runoob", "Google"); //另外一种写法达到同样目的
setTimeout(function(){ alertFunc("Runoob", "Google"); }, 2000);
2、当settimeout()的时间参数为0时
setTimeout(function(){
console.log(1);
}, 0);
console.log(2);
console.log(3);
//输出: 2 3 1
JS 是单线程的,单线程就意味着所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。在JS中同时维护着一个任务队列,上面代码中当执行遇到setTimeout(fn,millisec)时,会把fn这个函数放在任务队列中,当JS引擎线程空闲时并达到millisec指定的时间时,才会把fn放到js引擎线程中执行。
setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()
指定的时间执行。
3、解决在循环中setTimeout()函数输出问题
经典问题:
在for循环中使用 var 声明变量是全局变量,当for循环执行完毕,此时的 i 是5。再经过一秒钟后分别调用setTimeout函数,输出的 i 都是全局作用域中的 i ,即5。
for(var i=0; i<5; i++){
setTimeout(() => {
console.log(i);
}, 1000);
}
3.1、使用 let 关键字解决
let 关键字使每一次for循环中都有一个独立作用域中的 i ,互不干扰,所以输出的都是各自作用域中的 i,而不是全局作用域中的 i
for(let i=0; i<5; i++){
setTimeout(() => {
console.log(i);
}, 1000);
} //输出 0 1 2 3 4
3.2、使用闭包解决
for(var i=0; i<5; i++){
(function(j){
setTimeout(() => {
console.log(j);
}, 1000)
})(i)
} //输出 0 1 2 3 4
4、setTimeout和promise的执行顺序
setTimeout(function () {
console.log('定时器开始啦')
});
new Promise(function (resolve) {
console.log('马上执行for循环啦');
for (var i = 0; i < 10000; i++) {
i == 99 && resolve();
}
}).then(function () {
console.log('执行then函数啦')
});
console.log('代码执行结束');
//输出:马上执行for循环啦 代码执行结束 执行then函数啦 定时器开始啦
JS中的setTimeout()函数的更多相关文章
- asp.net类似于js中的setTimeOut()的函数作用?
asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- js中如何在一个函数里面执行另一个函数
1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- JavaScript -- 时光流逝(七):js中的全局函数
JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
- JS中关于把函数作为另一函数的参数的几点小总结
//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...
- js中的Generators函数
js中的Generators函数 generator一般操作 generator函数的作用就是函数体分段执行,yield表示分隔点 function *test() { console.log(1); ...
- JS中的回调函数实例浅析
本文实例讲述了JS中的回调函数.分享给大家供大家参考,具体如下: 在说回调函数之前,不妨先看一段代码,相信有点js基础的同学都能明白他的含义: ? 1 2 3 document.getElementB ...
随机推荐
- nginx配置-Rewrite
rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向.rewrite只能放在server{},location{},if{}中,并且只能 ...
- day02-Javascript之document.write()方法
转行学开发,代码100天.——2018-03-18 document.write()方法作为Javascript的常用输出方式,可输出字符串,标签元素,变量等. document.write(&quo ...
- CentOS 7命令行安装GNOME、KDE图形界面(成功安装验证)
来源:cnblogs.com/Amedeo 作者:Amedeo 正文 CentOS 7 默认是没有图形化界面的,但我们很多人在习惯了 Windows 的图形化界面之后,总是希望有一个图形化界面从而方 ...
- java数组,遍历数组
数组:一组具有相同数据类型的集合(容器) 1.数组声明格式: 数据类型 [] 数组名 = new 数据类型[长度]: 数组长度一旦确定无法更改. 数组里的数据必须是相同类型或自动向上转型后兼容的类型 ...
- 【python】 判断纯ascii串
参考:http://stackoverflow.com/questions/3636928/test-if-a-python-string-is-printable print all(ord(c)& ...
- Rust SDL2配置
github地址 https://github.com/Rust-SDL2/rust-sdl2 clone或下载这个项目 本文使用的是MSVC版本 上面链接页面搜Windows (MSVC) 得知需要 ...
- 08 (h5*) js第9天--原型、继承
目录: 1:原型和原型链 2:构造函数的原型可以改变 3:原型的最终指向 4:先修改原型指向,在添加方法. 5:实例对象中的属性和原型属性重合, 6:一个神奇的原型链 7:继承 8:原型链 9:利用c ...
- Jquery的Ajax实现异步刷新
在Jquery中提供了一套ajax的方法,有: $.ajax([data],fn) load(url, [data], [callback]) $.get(url, [data], [callback ...
- [Linux] 007 目录处理命令
1. 目录处理命令:mkdir 命令名称:mkdir 命令英文原意:make directories 命令所在路径:/bin/mkdir 执行权限:所有用户 语法:mkdir -p [目录名] 功能描 ...
- golang的数据类型之浮点类型
[root@node3 shangxuetang]# cat float.go package main import "fmt" //演示golang中小数类型使用func ma ...