一、解释说明
1、概述
setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段
setInterval:周期性地调用一个函数(function)或者执行一段代码。
2、语法
setTimeout:
var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]); var timeoutID = window.setTimeout(code, delay);
- timeoutID 是该延时操作的数字ID, 此ID随后可以用来作为window.clearTimeout方法的参数
- func 是你想要在delay毫秒之后执行的函数
- code 在第二种语法,是指你想要在delay毫秒之后执行的代码
- delay 是延迟的毫秒数 (一秒等于1000毫秒),函数的调用会在该延迟之后发生.但是实际的延迟时间可能会稍长一点
- 标准浏览器与IE10支持第一种语法中向延迟函数传递额外参数的功能
setInterval
var intervalID = window.setInterval(func, delay[, param1, param2, ...]); var intervalID = window.setInterval(code, delay);
- intervalID 是此重复操作的唯一辨识符,可以作为参数传给clearInterval()。
- func 是你想要重复调用的函数。
- code 是另一种语法的应用,是指你想要重复执行的一段字符串构成的代码
- delay 是每次延迟的毫秒数 (一秒等于1000毫秒),函数的每次调用会在该延迟之后发生。和setTimeout一样,实际的延迟时间可能会稍长一点。
- 标准浏览器与IE10支持第一种语法中向延迟函数传递额外参数的功能
<script type="text/javascript"> setTimeout( function(param){ alert(param)} , 100, 'ok'); </script>
简单测试了下第五条,在我的电脑上面分别使用firefox与IE9测试,前者可以顺利弹出ok,后者弹出了undefined。
二、“this”问题
由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致,这些代码中包含的 this 关键字会指向 window (全局对象)对象,这和所期望的this的值是不一样的。setInterval的情况类似。
<script type="text/javascript"> //this指向window function shape(name) { this.name = name; this.timer = function(){alert('my shape is '+this.name)}; setTimeout(this.timer, 50); } new shape('rectangle'); </script>
没有被传进去,分别用chrome,firefox和IE9实验了下,都是这个结果。
解决方法一:
<script type="text/javascript"> function shape(name) { this.name = name; this.timer = function(){alert('my shape is '+this.name)}; var _this = this; setTimeout(function() {_this.timer.call(_this)}, 50); } new shape('rectangle'); </script>
设置一个局部变量_this,然后放到setTimeout的函数变量中,timer执行call或apply,设置this值。
function能够调用局部变量_this,多亏了Javascript的闭包。里面涉及了作用域链等知识,有兴趣的可以自己去了解下,这里不展开了。
解决方法二:
这个方法有点高大上。自定义了setTimeout与setInterval。而且还扩展了低版本的IE浏览器,不支持向延迟函数传递额外参数的问题。
<script type="text/javascript"> //自定义setTimeout与setInterval var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () { vCallback.apply(oThis, aArgs); } : vCallback, nDelay); }; window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) { var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () { vCallback.apply(oThis, aArgs); } : vCallback, nDelay); }; function shape(name) { this.name = name; this.timer = function(other){ alert('my shape is '+this.name); alert('extra param is '+ other); }; } var rectangle = new shape('rectangle'); setTimeout.call(rectangle, rectangle.timer, 50, 'other'); </script>
1、设置局部变量,赋值为原生的setTimeout与setInterval
2、扩展setTimeout与setInterval,aArgs通过分割arguments这个变量,获取到额外的参数数组
3、用vCallback instanceof Function判断这是不是一个函数或代码,如果是函数就用apply执行
4、setTimeout用call执行,设定this对象,以及其它的func、delay等参数
5、顺便扩展setTimeout,IE低版本的浏览器也能执行额外参数
三、setTimeout与setInterval之间的一个区别
<script type="text/javascript"> setTimeout(function(){ /* Some long block of code... */ setTimeout(arguments.callee, 100); }, 10); setInterval(function(){ /* Some long block of code... */ }, 100); </script>
看上去,两个功能是差不多的,但是里面其实是不一样的。
setTimeout回调函数的执行和上一次执行之间的间隔至少有100ms(可能会更多,但不会少于100ms)
setInterval的回调函数将尝试每隔100ms执行一次,不论上次是否执行完毕,时间间隔理论上是会
setInterval:
<script type="text/javascript"> function sleep(ms) { var start = new Date(); while (new Date() - start <= ms) {} } var endTime = null; var i = 0; setInterval(count, 100); function count() { var elapsedTime = endTime ? (new Date() - endTime) : 100; i++; console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms'); sleep(200); endTime = new Date(); } </script>
从firefox的firebug可以查看到,时间间隔很不规则。
情况大致是这样的:由于count函数的执行时间远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件,并放到任务队列尾而不管它们是否已被处理,但一旦一个定时事件任务处理完,这些排列中的剩余定时事件就依次不间断的被执行。
setTimeout:
<script type="text/javascript"> function sleep(ms) { var start = new Date(); while (new Date() - start <= ms) {} } var endTime = null; var i = 0; setTimeout(count, 100); function count() { var elapsedTime = endTime ? (new Date() - endTime) : 100; i++; console.log('current count: ' + i + '.' + 'elapsed time: ' + elapsedTime + 'ms'); sleep(200); endTime = new Date(); setTimeout(count, 100); } </script>
以上就是本文的全部内容,希望对大家学习javascript定时器有所帮助。

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载
最流行的的开源编辑器

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具