setTimeout与setInterval的区别

一:setTimeout(): 用于指定在一定时间后执行某些代码

1、接受两个参数要执行的代码 + 执行回调函数前等待的时间(毫秒)
** 第二个参数指的是要等待的毫秒数,而不是执行代码的确切时间
2、JavaScript是单线程,所以每次只能执行一段代码。为了调度不同代码的执行,JavaScript维护了一个任务队列。其中的任务会按照添加到任务队列的先后顺序执行
**setTimeout()中的第二个参数只是告诉JavaScript引擎在指定的毫秒数过后把任务队列添加到这个队列。如果队列是空的,则会立即执行。如果队列不是空的则代码必须等待前面的任务执行完才能执行
3、调用setTimeout()时,会返回一个表示该超时排期的数值ID,ID是被排期执行代码的唯一标识符
**clearTimeout(数值ID) //取消超时任务

let timeoutId = setTimeout(()=>{
  console.log('执行方法体')
},500)
clearTimeout(timeoutId) //取消超时任务

clearTimeout()只是在指定时间达到之前调用,可以取消超时任务。在执行任务后再屌用则没有效果。 (因为它会在条件满足执行完自动结束)

二:setInterval(): 用于指定每隔一段时间执行某些代码

1、接受两个参数要执行的代码 + 执行回调函数前等待的时间(毫秒)(同setTimeout)
** 第二个参数指的是要等待的毫秒数,而不是执行代码的确切时间
2、第二个参数指的是间隔时间,指的是向队列添加新任务之前等待的时间。
例如:调用setInterval()任务的时间为01:00:00,间隔时间为3000毫秒。这就意味着01:00:03时,浏览器会把任务添加到任务队列。浏览器并不关心这个任务什么时候执行或者执行需要花多少时间。因此,到了01:00:06,它会向队列中添加一个任务。由此可看,执行时间短、非阻塞的回调函数比较适合setInterval()
3、调用setInterval()时,会返回一个循环定时ID,可用于在未来某个时间点上取消循环定时
**clearInterval(定时ID) //取消定时任务,如果不取消,那么定时任务会一直执行到页面卸载

setInterval()很少会在生产环境下使用,因为一个任务结束和下一个任务开始之间的时间间隔是无法保证的,有些循环定时任务可能会因此而跳过

1、setInterval()可能会导致的问题

1、前一任务结束到当前任务开始的时间间隔与设置的delay值不符。
2、可能出现某些任务被跳过的情况

1.1假如定时器里面的代码需要进行大量的计算(耗费时间较长)或者 DOM 操作。这样一来,花的时间就比较长,有可能前一次代码还没有执行完,后一次代码就被添加到[队列]了。也会使定时器变得不准确。

setInterval(fun, delay)
//当fun执行消耗400ms,delay为300ms时,前一个任务执行结束到后一个任务开始执行间隔为-100ms

1.2假设setInterval 每隔 400ms 往队列中添加一个事件;400ms 后,添加 T1 定时器代码至队列中,主线程中还有任务在执行,所以等待。some event 执行结束后执行 T1 定时器代码;又过了 400ms,T2 定时器被添加到队列中,主线程还在执行 T1 代码,所以等待;又过了 400ms,理论上又要往队列里推一个定时器代码,但由于此时 T2 还在队列中,所以 T3 不会被添加(T3 被跳过),结果就是此时被跳过;这里我们可以看到,T1 定时器执行结束后马上执行了 T2 代码,所以并没有达到定时器的效果

三:两种方法代码实现对比,更推荐使用setTimeout()

setInterval()

let num = 0;
let intervalId = null;
let max = 10;

let increamNumber = function(){
  num++;
  if(num == max) {
    clearInterval(intervalId);
    alert('Done')
  }
}
intervalId = setInterval(increamNumber,  500)

setTimeout()

也可以用setTimeout()实现,且更推荐使用它

let num = 0;
let max = 10;
let increamNumber = function(){
   num++;
  if(num == max) {
    setTimeout(increamNumber, 500) //方法执行完以后作为开始点再设置间隔时间等待
  } else {
    alert("Done")
  }
 } 
setTimeout(increamNumber, 500)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容