setTimeout()和clearTimeout用法详解

setTimeout()是window的方法，该方法用于在指定毫秒数后调用函数或者计算表达式。

我们一般常用的参数是两个，今天发现还有第三个参数
语法如下：

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

对于code这种方式，你可以使用字符串而不是安全function 的，在delay使用之后编译和执行字符串（使用该语法是不推荐的，原因和 eval()一样，有风险）。

参数	描述
function	必需参数可以是回调函数
delay	可选。执行这个function 需要等待的时间，以毫秒计。默认为 0。
arg	可选。传给回调函数的参数（IE9 及其更早版本不支持该参数）。

下面是一道经典的面试题

for (var i = 1; i <= 5; i++) {setTimeout(function timer() {console.log(i)}, i * 1000)
}

执行代码，发现会每过一秒，会输出一个6，一共输出五次
那么怎么让他每隔1秒，依次输出12345呢，除了用let来定义i，还有一种方法就是利用setTimeout得第三个参数，这个参数会被当成 timer 函数的参数传入。
代码如下：

for (var i = 1; i <= 5; i++) {setTimeout(function timer(j) {console.log(j)},i * 1000,i)
}

第三个参数以及之后的参数都可以作为回调函数的参数，举个最简单的例子
一个参数：

setTimeout((name) => {console.log('我是' +  name)
}, 1000, '小太阳')
// 1秒后输出我是小太阳

多个参数：

setTimeout((name, age) => {console.log('我是' + name + '永远' + age + '岁')
}, 1000, '小太阳', '18')
// 1秒后输出我是小太阳永远18岁

如果第三个参数是个函数，则会先执行这个函数

setTimeout(function(){console.log('回调函数')},1000,setTimeout(function(){console.log('先执行')}, 0)
)
// 立即输出先执行，1秒后输出回调函数

返回值 timeoutID
setTimeout的返回值timeoutID是一个正值，表示可以给予这个clearTimeout()最终结果。+

下面就说一下clearTimeout()

clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。
clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

语法：

clearTimeout(timeoutID)

参数	描述
timeoutID	调用 setTimeout() 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout() 所设定的定时执行操作。

setTimeout()和clearTimeout用法详解相关推荐

ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
ajax then fail done,Jquery $when done then的用法详解
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when...done...fail...then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下 ...
linux 弹出窗口,实现弹出窗口的window.open用法详解(js代码)
实现弹出窗口的window.open用法详解(js代码) [1.最基本的弹出窗口代码] 其实代码非常简单: 因为这是一段javascripts代码,所以它们应该放在 cript">标签 ...
python argv 详解_Python3 sys.argv[ ]用法详解
sys.argv[]说白了就是一个从程序外部获取参数的桥梁,这个"外部"很关键,因为我们从外部取得的参数可以是多个,所以获得的是一个列表(list),也就是说sys.argv其实可 ...
oracle中的exists 和 not exists 用法详解
from:http://blog.sina.com.cn/s/blog_601d1ce30100cyrb.html oracle中的exists 和 not exists 用法详解 (2009-05- ...
ROW_NUMBER() OVER()函数用法详解（分组排序例子多）
ROW_NUMBER() OVER()函数用法详解 (分组排序例子多) https://blog.csdn.net/qq_25221835/article/details/82762416 post ...
python的继承用法_【后端开发】python中继承有什么用法？python继承的用法详解
本篇文章给大家带来的内容是关于python中继承有什么用法?python继承的用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 面向对象三大特征 1.封装:根据职责将属性和方法 ...
C++中substr()函数用法详解
C++中substr()函数用法详解原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
php theme_path,PHP_Yii2主题(Theme)用法详解，本文实例讲述了Yii2主题(Theme) - phpStudy
Yii2主题(Theme)用法详解本文实例讲述了Yii2主题(Theme)用法.分享给大家供大家参考,具体如下: 首先看看主要的配置方式: 'components' => [ 'view' = ...

setTimeout()和clearTimeout用法详解

setTimeout()和clearTimeout用法详解相关推荐

最新文章

热门文章