深入理解定时器系列第一篇——理解setTimeout和setInterval

　　很长时间以来，定时器一直是javascript动画的核心技术。但是，关于定时器，人们通常只了解如何使用setTimeout()和setInterval()，对它们的内在运行机制并不理解，对于与预想不同的实际运行状况也无法解决。本文将详细介绍定时器的相关内容

setTimeout()

　　setTimeout()方法用来指定某个函数或字符串在指定的毫秒数之后执行。它返回一个整数，表示定时器的编号，这个值可以传递给clearTimeout()用于取消这个函数的执行

　　以下代码中，控制台先输出0，大概过1000ms即1s后，输出定时器setTimeout()方法的返回值1

var Timer = setTimeout(function(){
    console.log(Timer);
},1000);
console.log(0);

　　也可以写成字符串参数的形式，由于这种形式会造成javascript引擎两次解析，降低性能，故不建议使用

var Timer = setTimeout(‘console.log(Timer);‘,1000);
console.log(0);

　　如果省略setTimeout的第二个参数，则该参数默认为0

　　以下代码中，控制台出现0和1，但是0却在前面，后面会解释这个疑问

var Timer = setTimeout(function(){
    console.log(Timer);
});
console.log(0);

　　实际上，除了前两个参数，setTimeout()方法还允许添加更多的参数，它们将被传入定时器中的函数中

　　以下代码中，控制台大概过1000ms即1s后，输出2，而IE9-浏览器只允许setTimeout有两个参数，不支持更多的参数，会在控制台输出NaN

setTimeout(function(a,b){
  console.log(a+b);
},1000,1,1);

　　可以使用IIFE传参来兼容IE9-浏览器的函数传参

setTimeout((function(a,b){
    return function(){
        console.log(a+b);
    }
})(1,1),1000);

　　或者将函数写在定时器外面，然后函数在定时器中的匿名函数中带参数调用

function test(a,b){
    console.log(a+b);
}
setTimeout(function(){
    test(1,1);
},1000);

　　[注意]IE8-浏览器不允许向定时器中传递事件对象event，如果要使用事件对象中的某些属性，可以将其保存在变量中传递进去

div.onclick = function(e){
    e = e || event;
    var type = e.type;
    setTimeout(function(){
        console.log(type);//click
        console.log(e.type);//报错
    })
}

this指向

　　在this机制系列已经详细介绍过this指向的4种绑定规则，由于定时器中的this存在隐式丢失的情况，且极易出错，因此在这里再次进行说明

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
setTimeout(obj.foo,100);//0

//等价于
var a = 0;
setTimeout(function foo(){
    console.log(this.a);
},100);//0

　　若想获得obj对象中的a属性值，可以将obj.foo函数放置在定时器中的匿名函数中进行隐式绑定

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
setTimeout(function(){
    obj.foo();
},100);//2

　　或者也可以使用bind方法将foo()方法的this绑定到obj上

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
setTimeout(obj.foo.bind(obj),100);//2

clearTimeout()

　　setTimeout函数返回一个表示计数器编号的整数值，将该整数传入clearTimeout函数，取消对应的定时器

//过100ms后，控制台输出setTimeout()方法的返回值1
var Timer = setTimeout(function(){
    console.log(Timer);
},100);

　　于是可以利用这个值来取消对应的定时器

var Timer = setTimeout(function(){
    console.log(Timer);
},100);
clearTimeout(Timer);

　　或者直接使用返回值作为参数

var Timer = setTimeout(function(){
    console.log(Timer);
},100);
clearTimeout(1);

　　一般来说，setTimeout返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值比第一个的整数值大1

//控制台输出1、2、3
var Timer1 = setTimeout(function(){
    console.log(Timer1);
},100);
var Timer2 = setTimeout(function(){
    console.log(Timer2);
},100);
var Timer3 = setTimeout(function(){
    console.log(Timer3);
},100);

setInterval()

　　setInterval的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行

<button id="btn">0</button>
<script>
var timer = setInterval(function(){
    btn.innerHTML = Number(btn.innerHTML) + 1;
},1000);
btn.onclick = function(){
    clearInterval(timer);
    btn.innerHTML = 0;
}
</script>

　　[注意]HTML5标准规定，setTimeout的最短时间间隔是4毫秒；setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒

　　大多数电脑显示器的刷新频率是60HZ，大概相当于每秒钟重绘60次。因此，最平滑的动画效的最佳循环间隔是1000ms/60，约等于16.6ms

　　为了节电，对于那些不处于当前窗口的页面，浏览器会将时间间隔扩大到1000毫秒。另外，如果笔记本电脑处于电池供电状态，Chrome和IE10+浏览器，会将时间间隔切换到系统定时器，大约是16.6毫秒

运行机制

　　下面来解释前面部分遗留的疑问，为什么下面代码的控制台结果中，0出现在1的前面呢？

setTimeout(function(){
    console.log(1);
});
console.log(0);

　　实际上，把setTimeout的第二个参数设置为0s，并不是立即执行函数的意思，只是把函数放入异步队列。浏览器先执行完同步队列里的任务，才会去执行异步队列中的任务

　　在下面这个例子中，给一个按钮btn设置了一个事件处理程序。事件处理程序设置了一个250ms后调用的定时器。点击该按钮后，首先将onclick事件处理程序加入队列。该程序执行后才设置定时器，再有250ms后，指定的代码才被添加到队列中等待执行

btn.onclick = function(){
    setTimeout(function(){
        console.log(1);
    },250);
}

　　如果上面代码中的onclick事件处理程序执行了300ms，那么定时器的代码至少要在定时器设置之后的300ms后才会被执行。队列中所有的代码都要等到javascript进程空闲之后才能执行，而不管它们是如何添加到队列中的

　　如图所示，尽管在255ms处添加了定时器代码，但这时候还不能执行，因为onclick事件处理程序仍在运行。定时器代码最早能执行的时机是在300ms处，即onclick事件处理程序结束之后

setInterval()的问题

　　使用setInterval()的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿。而javascript引擎对这个问题的解决是：当使用setInterval()时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔

　　但是，这样会导致两个问题：1、某些间隔被跳过；2、多个定时器的代码执行之间的间隔可能比预期的小

　　假设，某个onclick事件处理程序使用setInterval()设置了200ms间隔的定时器。如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况

　　例子中的第一个定时器是在205ms处添加到队列中的，但是直到过了300ms处才能执行。当执行这个定时器代码时，在405ms处又给队列添加了另一个副本。在下一个间隔，即605ms处，第一个定时器代码仍在运行，同时在队列中已经有了一个定时器代码的实例。结果是，在这个时间点上的定时器代码不会被添加到队列中

迭代setTimeout

　　为了避免setInterval()定时器的问题，可以使用链式setTimeout()调用

setTimeout(function fn(){
    setTimeout(fn,interval);
},interval);

　　这个模式链式调用了setTimeout()，每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用当前执行的函数，并为其设置另外一个定时器。这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行

　　使用setInterval()

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<script>
myDiv.onclick = function(){
    var timer = setInterval(function(){
        if(parseInt(myDiv.style.left) > 200){
            clearInterval(timer);
            return false;
        }
        myDiv.style.left = parseInt(myDiv.style.left) + 5 + ‘px‘;    

    },16);
}
</script>

　　使用链式setTimeout()

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;position:absolute;left:0;"></div>
<script>
myDiv.onclick = function(){
    setTimeout(function fn(){
        if(parseInt(myDiv.style.left) <= 200){
            setTimeout(fn,16);
        }else{
            return false;
        }
        myDiv.style.left = parseInt(myDiv.style.left) + 5 + ‘px‘;
    },16);
}
</script>

转载自：https://www.cnblogs.com/xiaohuochai/p/5773183.html

应用

　　使用定时器来调整事件发生顺序

　　【1】网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，我们先让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)

　　正常情况下，点击div元素，先弹出0，再弹出1

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
    alert(0);
}
document.onclick = function(){
    alert(1);
}
</script>

　　如果进行想让document的onclick事件先发生，即点击div元素，先弹出1，再弹出0。则进行如下设置

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
    setTimeout(function(){
        alert(0);
    })
}
document.onclick = function(){
    alert(1);
}
</script>

　　【2】用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
  this.value = this.value.toUpperCase();
}
</script>

　　上面代码想在用户输入文本后，立即将字符转为大写。但是实际上，它只能将上一个字符转为大写，因为浏览器此时还没接收到文本，所以this.value取不到最新输入的那个字符

　　只有用setTimeout改写，上面的代码才能发挥作用

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
    setTimeout(function(){
        myInput.value = myInput.value.toUpperCase();
    });
}
</script>

转载自：https://www.cnblogs.com/xiaohuochai/p/5773183.html

原文地址：https://www.cnblogs.com/create-and-orange/p/10849909.html

时间： 2024-08-03 17:38:10

深入理解定时器系列第一篇——理解setTimeout和setInterval的相关文章

深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame 引入 计时器一直是javascript动画的核心技术.而编写动画循环的关键是要知道延迟时间多长合适.一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅:另一方面,循环间隔还要足够长,这样才能确保浏览器有能

深入理解闭包系列第一篇——到底什么才是闭包

前面的话 闭包已经成为近乎神话的概念,它非常重要又难以掌握,而且还难以定义.本文就从闭包的定义说开去 古老定义 闭包(closure),是指函数变量可以保存在函数作用域内,因此看起来是函数将变量“包裹”了起来 那这样说来,包含变量的函数就是闭包 //按照古老定义,包含变量n的函数foo就是闭包 function foo() { var n = 0; } console.log(n)//Uncaught ReferenceError: n is not defined 定义一 闭包是指可以访问其所

深入理解表单脚本系列第一篇——表单对象

× 目录 [1]表单属性 [2]表单事件 [3]表单方法 前面的话 javascript最初的一个应用就是分担服务器处理表单的责任,打破处处依赖服务器的局面.尽管目前的web和javascript已经有了长足的发展,但web表单的变化并不明显.由于web表单没有为许多常见任务提供现成的解决方法,很多开发人员不仅会在验证表单时使用javascript,而且还增强了一些标准表单控件的默认行为.本文是表单脚本系列第一篇——表单对象 表单属性 在HTML中,表单是由form元素来表示的,而在javasc

前端学HTTP之报文系列第一篇——起始行

前面的话 如果说HTTP是因特网的信使,那么HTTP报文就是它用来搬东西的包裹了.HTTP报文是在HTTP应用程序之间发送的简单的格式化数据块,每条报文都包含一条来自客户端的请求,或者一条来自服务器的响应.它们由三个部分组成:由起始行.首部和实体的主体部分.本文是HTTP报文系列第一篇——起始行 报文语法 所有的HTTP报文都可以分为两类:请求报文(request message)和响应报文(response message).请求报文会向Web服务器请求一个动作,响应报文会将请求的结果返回给客

Java小白入门系列 第一篇 写在前面

2018年8月30日  22:00:17 郑州  多云 Sue Java小白入门系列 第一篇  写在前面 写在前面: 首先声明一下,本人也是正在学Java,并不是多么专业人士,只是最近受老师的启发,所以准备写个关于java新手入门系列的博客,包括搭建Java开发环境.Java入门知识,也会分享一些好用的软件及破解器之类的,一方面是巩固所学的知识,另一方面是给有兴趣的小白做练手.入门之用,本系列博客完全开放,所有资源不收任何费用,欢迎大家转发留言,入门之用,不喜勿喷,恶人绕道! Java是不是很难

深入理解this机制系列第一篇——this的4种绑定规则

× 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.前面的作用域系列已经详细介绍过作用域的知识.本系列开始将介绍javascript的另一大山脉——this机制.本文是该系列的第一篇——this的4种绑定规则 默认绑定 全局环境中,this默认绑定到window console.log(this === window);//true 函数独立调用时

深入理解javascript作用域系列第一篇——内部原理

× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原理更为重要.本文是深入理解javascript作用域系列的第一篇——内部原理 内部原理分成编译.执行.查询.嵌套和异常五个部分进行介绍,最后以一个实例过程对原理进行完整说明 编译 以var a = 2;为例,说明javasc

深入理解javascript对象系列第一篇——初识对象

× 目录 [1]定义 [2]创建 [3]组成[4]引用 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初识对象 对象定义 javascript的基本数据类型包括undefined.null.boolean.string.number和object.对象和其他基本类型值不同的是,对象是一种复合值:它将许多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值 于是,对象也可看做是属性的无序集合,每个属性都是一个

剖析Elasticsearch集群系列第一篇 Elasticsearch的存储模型和读写操作

剖析Elasticsearch集群系列涵盖了当今最流行的分布式搜索引擎Elasticsearch的底层架构和原型实例. 本文是这个系列的第一篇,在本文中,我们将讨论的Elasticsearch的底层存储模型及CRUD(创建.读取.更新和删除)操作的工作原理. Elasticsearch是当今最流行的分布式搜索引擎,GitHub. SalesforceIQ.Netflix等公司将其用于全文检索和分析应用.在Insight,我们用到了Elasticsearch的诸多不同功能,比如: 全文检索 比如找