色哟哟视频在线观看-色哟哟视频在线-色哟哟欧美15最新在线-色哟哟免费在线观看-国产l精品国产亚洲区在线观看-国产l精品国产亚洲区久久

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

簡述javascript定時器工作原理

jf_78858299 ? 來源:全棧開發者中心 ? 作者:全棧開發者中心 ? 2023-04-21 14:32 ? 次閱讀

說到 javascript 中的定時器,我們肯定會想到 setTimeout() 和 setInterval() 這兩個函數。本文將從事件循環(Event Loop) 的角度來分析兩者的工作原理和區別。

**setTimeout()**

MDN對 setTimeout 的定義為:

在指定的延遲時間之后調用一個函數或執行一個代碼片段。

語法

setTimeout 的語法非常簡單,第一個參數為回調函數,第二個參數為延時的時間。函數返回一個數值類型的ID唯一標示符,此ID可以用作 clearTimeout 的參數來取消定時器:

var timeoutID = window.setTimeout(code, delay);

IE0+ 還支持回調參數的傳入:

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

setInterval()

MDN 對 setInterval 的定義為:

周期性地調用一個函數(function)或者執行一段代碼。

由于 setInterval 和 setTimeout 的用法一樣,所以這里不再列出。

對第二個參數(delay)的說明

由于javascript 的事件循環機制,導致第二個參數并不代表延遲delay毫秒之后立即執行回調函數,而是嘗試將回調函數加入到事件隊列。實際上,setTimeout 和 setInterval 在這一點上處理又存在區別:

  • setTimeout:延時delay毫秒之后,啥也不管,直接將回調函數加入事件隊列。
  • setInterval: 延時delay毫秒之后,先看看事件隊列中是否存在還沒有執行的回調函數(setInterval的回調函數),如果存在,就不要再往事件隊列里加入回調函數了。

所以,當我們的代碼中存在耗時的任務時,定時器并不會表現的如我們所想的那樣。

通過一個例子來理解

下面的代碼,本來希望能夠在 100ms 和 200ms 的時候(也就是剛好等待 100ms)調用回調函數:

var timerStart1 = now();
setTimeout(function () {
  console.log('第一個setTimeout回調執行等待時間:', now() - timerStart1);

  var timerStart2 = now();
  setTimeout(function () {
    console.log('第二個setTimeout回調執行等待時間:', now() - timerStart2);
  }, 100);
}, 100);
// 輸出:
// 第一個setTimeout回調執行等待時間: 106
// 第二個setTimeout回調執行等待時間: 107

這樣的結果看上去正是我們所想的那樣,但是一旦我們在代碼中加入了耗時的任務時候,結果就不像我們所期望的那樣了:

var timerStart1 = now();
setTimeout(function () {
  console.log('第一個setTimeout回調執行等待時間:', now() - timerStart1);

  var timerStart2 = now();
  setTimeout(function () {
    console.log('第二個setTimeout回調執行等待時間:', now() - timerStart2);
  }, 100);

  heavyTask();  // 耗時任務
}, 100);

var loopStart = now();
heavyTask(); // 耗時任務
console.log('heavyTask耗費時間:', now() - loopStart);

function heavyTask() {
  var s = now();
  while(now() - s < 1000) {
  }
}

function now () {
  return new Date();
}
// 輸出:
// heavyTask耗費時間: 1015
// 第一個setTimeout回調執行等待時間: 1018
// 第二個setTimeout回調執行等待時間: 1000

兩個 setTimeout 的等待事件由于耗時任務的存在不再是 100ms 了!我們來描述一下事情的經過:

  1. 首先,第一個耗時任務(heavyTask())開始執行,它需要大約 1000ms 才能執行完畢。
  2. 從耗時任務開始執行,過了 100ms, 第一個 setTimeout 的回調函數期望執行,于是被加入到事件隊列,但是此時前面的耗時任務還沒執行完,所以它只能在隊列中等待,直到耗時任務執行完畢它才開始執行,所以結果中我們開的看到的是: 第一個setTimeout回調執行等待時間:1018。
  3. 第一個 setTimeout 回調一執行,又開啟了第二個 setTimeout, 這個定時器也是期望延時 100ms 之后能夠執行它的回調函數。但是,在第一個 setTimeout 又存在一個耗時任務,所有它的劇情跟第一個定時器一樣,也等待了 1000ms 才開始執行。

可以用下面的圖來概括:

圖片

再來看 setInterval 的一個例子:

var intervalStart = now();
setInterval(function () {
  console.log('interval距定義定時器的時間:', now() - loopStart);
}, 100);

var loopStart = now();
heavyTask();
console.log('heavyTask耗費時間:', now() - loopStart);

function heavyTask() {
  var s = now();
  while(now() - s < 1000) {
  }
}

function now () {
  return new Date();
}
// 輸出:
// heavyTask耗費時間: 1013
// interval距定義定時器的時間: 1016
// interval距定義定時器的時間: 1123
// interval距定義定時器的時間: 1224

上面這段代碼,我們期望每隔 100ms 就打出一條日志。相對于 setTimeout 的區別, setInterval 在準備把回調函數加入到事件隊列的時候,會判斷隊列中是否還有未執行的回調,如果有的話,它就不會再往隊列中添加回調函數。 不然,會出現多個回調同時執行的情況。

可以用下面的圖來概括:

圖片

總結

上面對javascript定時器執行原理進行了簡要的分析,希望能夠幫助我們更深入的理解javascript。文中有描述不當的地方可以在評論中指出。

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 定時器
    +關注

    關注

    23

    文章

    3246

    瀏覽量

    114727
  • 函數
    +關注

    關注

    3

    文章

    4328

    瀏覽量

    62574
  • javascript
    +關注

    關注

    0

    文章

    516

    瀏覽量

    53851
收藏 人收藏

    評論

    相關推薦

    定時器的基本工作原理

    一、定時器的基本概述通過滴漏和漏沙瓶這兩個例子簡單講述定時器的基本工作原理。STM32的常見的定時器資源:系統嘀嗒定時器SysTick、看門
    發表于 08-02 08:45

    STM32定時器工作原理及分類

    STM32—定時器知多少這里寫目錄標題STM32---定時器知多少定時器的分類定時器工作原理定時器的應用
    發表于 08-02 09:36

    定時器工作原理

    標準庫3.5實現:《嵌入式-STM32開發指南》第二部分 基礎篇 - 第4章 定時器4.1定時器工作原理STM32有三類定時器,基本定時器
    發表于 08-19 07:49

    555定時器內部框圖及電路工作原理

     本文介紹555定時器內部框圖及電路工作原理: 555定時器內部框圖 555集成時基電路稱為集成定時
    發表于 11-22 13:00 ?7.8w次閱讀
    555<b class='flag-5'>定時器</b>內部框圖及電路<b class='flag-5'>工作原理</b>

    定時器/計數的結構和工作原理

    定時器/計數的結構和工作原理 定時器/計數的結構  定時器/計數
    發表于 03-29 09:08 ?2w次閱讀
    <b class='flag-5'>定時器</b>/計數<b class='flag-5'>器</b>的結構和<b class='flag-5'>工作原理</b>

    555定時器工作原理及應用引腳圖

    介紹555定時器工作原理及應用引腳圖. 和了解最基本電路
    發表于 12-23 11:16 ?16次下載

    單片機計數_定時器工作原理_

    單片機計數_定時器工作原理定時器、計數寄存,以及定時
    發表于 05-06 14:12 ?1次下載

    SysTick定時器工作原理介紹

    今天給大家介紹一下 STM32F103 單片機的 SysTick 定時器工作原理,在給大家講解新課之前,看一個我們以前寫的一個延時函數。
    發表于 11-11 17:17 ?22次下載

    51單片機定時器工作原理

    51單片機定時器工作原理及用法
    的頭像 發表于 03-14 13:51 ?9.6w次閱讀

    小風扇定時器電路圖及工作原理

    本文主要介紹了小風扇定時器電路圖及工作原理說明。
    發表于 10-25 15:05 ?2.3w次閱讀
    小風扇<b class='flag-5'>定時器</b>電路圖及<b class='flag-5'>工作原理</b>

    簡述555定時器設計數字時鐘

    簡述555定時器設計數字時鐘
    發表于 10-08 16:26 ?22次下載

    定時器中斷是什么意思,定時器中斷的工作原理

    定時器中斷是由單片機中的定時器溢出而申請的中斷。51單片機中有兩個定時器T0和T1。STM32中共有11個定時器
    的頭像 發表于 07-23 09:45 ?6145次閱讀

    555定時器的三種典型應用 簡述555定時器工作原理

    555定時器是一種廣泛使用的集成電路,在電子電路中有許多常見的應用。以下是555定時器的三種典型應用
    發表于 07-28 10:12 ?6160次閱讀

    PLC定時器工作原理和應用

    至關重要的角色。定時器能夠實現對時間的精確控制,是控制系統中實現延時、定時、周期控制等功能的關鍵元件之一。本文將詳細闡述PLC中定時器工作原理及應用,以期為相關技術人員提供參考。
    的頭像 發表于 06-18 11:55 ?2421次閱讀

    簡述單片機定時器工作原理

    單片機定時器工作原理是一個復雜而精細的過程,它涉及到單片機內部的多個組件和機制。
    的頭像 發表于 08-19 18:20 ?1328次閱讀
    主站蜘蛛池模板: 深夜释放自己在线观看| 东北足疗店妓女在线观看| 性西欧俄罗斯极品| 日韩一区二区天海翼| 欧美14videosex性欧美成人| 李亚男三级| 狂操空姐电影| 久久婷婷色香五月综合激情| 九色PORNY丨视频入口| 果冻传媒在线观看资源七夕| 国产婷婷色一区二区三区在线 | 欧美在线看欧美视频免费| 美女洗澡脱得一二干净| 美女搜查官被高难度黑人在线播放| 久久国产成人午夜AV影院无码| 精品视频中文字幕| 精品欧美18videosex欧美| 精品人妻一区二区三区视频53| 狠狠色狠狠色88综合日日91| 韩国演艺圈悲惨在线| 久久精品99热超碰| 老妇高潮潮喷到猛进猛出| 美女强奷到抽搐在线播放| 毛片手机在线| 欧美亚洲色帝国| 色狠狠婷婷97| 香蕉精品国产高清自在自线| 亚洲成人免费观看| 伊人久久大香线蕉综合色啪| 杨幂被视频在线观看| 在线播放真实国产乱子伦| 99国产精品久久人妻无码| jlzzzjizzzjlzzz亚洲| 高h肉文合集| 国模大胆一区二区三区| 久久www免费人成_看片高清| 蜜臀AV999无码精品国产| 日本丝袜护士| 亚洲国产精品高清在线| 正在播放国产精品| wwwwxxxx欧美|