setTimeout和setInterval不容易注意到的一些细节

今天没事翻了翻JS高程,看到了setTimeout部分有这么一句话:调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符,可以通过它来取消超时调用。

然后我从书中上下左右找了半天也没发现有说这个ID的地方,于是乎抱着钻牛角尖的心态我去试了试,发现了一些很有意思的东西。

var id1 =setTimeout(function(){},10);var id2 =setTimeout(function(){},10);console.log(id1); //1console.log(id2); //2
这个不是重点,重点是我又试了一下setInterval():
var id3 =setInterval(function(){},10);console.log(id3); //3
也就是说这两个函数的id值是顺次创建的,一般情况下我们想要清除一个setTimeout()需要这么做:
clearTimeout(id1);
于是我想既然我们知道了它的id值是不是可以直接去清除呢?我就试了一下:
clearTimeout(1);
OK,成功了,完全没有问题!接着我又想既然他俩的id值都是数字能不能混着清除?然后又试了一下:
clearTimeout(id3);
还是成功了!这俩居然能够混用,我也是醉了。好吧,这个真是神奇,有必要记下来。

接下来再说说这setTImeout()别的方面的一些特点吧。

setTimeout()这个函数的第二个值是一个毫秒数,不能设置成0,或者说设置成0也没啥用,因为H5里面规定了它的最小值是4,也就是说小于4的人家会给你自动加上。

假设可以是0的话下面这个结果也永远是1,3,2:
console.log(1);setTimeout(function(){console.log(2)},0);console.log(3);
为什么呢?这就要说到JS语言的特性上了,JS这门语言创作的目的就是为了高效、简单、快捷,所以创作初始就将它定成了一门单线程的语言,但是如果真是单线程的话又会出现很多的问题,比如说事件堵塞,每一个任务执行完了才能去执行下一个任务。打个比方:你朋友中午要来你家吃饭,你决定要给他做几个菜,其中有一道糖醋鱼,会做饭的人都知道做鱼要提前把鱼用调料腌上半天鱼肉才能入味,你早上把鱼腌上了,然后你就在旁边等这个鱼腌好,等了一上午鱼终于腌好了你才发现没有买别的菜,朋友这时候来你家做客你一道菜也没有做好,尴尬了。这就类似于一个单线程的任务,一个执行完了才能执行另一个,其中有大量的等待时间,造成了资源的浪费和任务的堵塞。JS为了解决这个问题引入了异步处理的方法,也就是说你腌了鱼直接扔一边接着去干别的事情,等别的事情弄好了再回来看看鱼腌好没。

Web Work中规定了JS可以拥有多线程,但是同一时间只能拥有一个主线程,除了主线程其他线程不允许任何的dom操作,也就是说其他的线程类似于辅助线程。主线程中有一个执行栈,栈中的任务如果是同步执行结束了就会释放掉,如果是异步则会执行后进入辅助线程的任务队列之中,执行栈中如果空了主线程就会重新查找任务队列中的任务来执行,这叫做任务轮询。而今天我们的主角setTimeout也是一个异步的操作,而且比较不受待见,只有执行栈和任务队列中的任务全部执行完了才会去执行它,也就是说后面这个时间就是一个虚的数字,并不是真正意义上的执行后延时,因此即使它是0,也会是最后执行。

吐槽一句写博客真是挺累的,打了没多久手都酸了,还是敲代码来的省事。最后再说说setTimeout这个函数的另一个用法吧,就是设定计时器:
//计时器var num = 0;var max = 10;function setTime(){    num++;    console.log(num);    if(num<max){        setTimeout(setTime,1000);    }else{        console.log("Done");    }}setTime();
因为setInterval会一直循环如果忘了清除的话有可能会给用户带来不小的困扰,因此做一个计时器来有限次的执行是有很有必要的,当然,setInterval也并不是一无是处,比如常见的轮播图就离不开它,好吧其实setTimeout也能实现它,本来想夸两句的结果又把它黑了。
时间: 2024-10-09 00:14:39

setTimeout和setInterval不容易注意到的一些细节的相关文章

setTimeout()与setInterval()——走马灯效果

JavaScript中的setTimeout()与setInterval()都是指延时执行某一操作. 但setInterval()指每隔指定时间执行某操作,会循环不断地执行该操作:setTimeout()只延时指定时间后执行该操作,且只执行一次. setTimeout()在某种情况下也能实现setInterval()的效果,比较经典的例子就是在在函数内部调用自己.向下面这样: function example(){ ... setTimeout("example()", 1000);

js setTimeout 与 setInterval 以及 for 循环 刷新UI

1. setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式:执行一次: 如果需要执行多次,自身再次调用 setTimeout(): 示例:无穷循环并带停止按钮的 <html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTim

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

setTimeout与setInterval的区别

setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使用达到循环调用的效果4.setInterval一般在方法外部使用就可以达到循环调用效果 setTimeout例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

setTimeout()与setInterval()方法区别介绍

计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助 计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别. setTimeout(): 在js手册中的解释:用于在指定的毫秒数后调用函数或计算表达式: 也就是说在执行完设定好的秒数后再执行. 代码如下: setTimeout(function(){ $("body").css("backgrou

setTimeout与setInterval方法的区别

setTimeout与setInterval方法的区别 setTimeout()用于设定在指定的时间之后执行对应的函数或代码.,在全局作用域下执行 setTimeout(code,time[,args…]) code: 需要执行的函数或js代码,等待的时间,args:参数 如:function sayHello(name, age){ //在5秒钟后弹出提示信息"我叫CodePlayer,今年18岁!". alert("我叫" + name + ",今年&

Javascript 笔记与总结(2-13)定时器 setTimeout 和 setInterval

定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果.定时器不属于 javascript,是 window 对象提供的功能. setTimeout 用法: window.setTimeout('语句',毫秒); //指定毫秒后执行一次语句 [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

QML中实现setTimeout和setInterval

Qt的QML中,js未提供setTimeout和setInterval,可以通过下面的代码实现. Timer {id: timer} function setTimeout(cb,delayTime) { //timer = new Timer(); timer.interval = delayTime; timer.repeat = false; timer.triggered.connect(cb); timer.start(); } https://my.oschina.net/lieef

Javascript异步编程之setTimeout与setInterval详解分析(一)

Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程( 注意: 特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛多多原谅!) 1. setTimeout与setInterval详细分析基本原理. 接下来这篇博客会总结setTimeout和setInterval基本点,对于上面三点会分三篇博客分别来总结,对于知道上面三点的人,但是又不是非常了解全面知识点的码农来说,没有关系的,我们可以慢慢来学习,来理解,或