From b795bc99fc5c5d8a96c1b202a12750404085c28a Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Fri, 4 Oct 2024 13:37:27 +0800 Subject: [PATCH] Fix globals, part 16: `clearInterval()` & `setInterval()` (#36042) * move * update content * update content * sync redirects * update * Apply suggestions from code review Co-authored-by: wbamberg * Update files/en-us/web/api/workerglobalscope/setinterval/index.md --------- Co-authored-by: wbamberg --- files/en-us/_redirects.txt | 40 ++-- files/en-us/_wikihistory.json | 178 +++++++++--------- files/en-us/games/anatomy/index.md | 2 +- .../finishing_up/index.md | 2 +- .../move_the_ball/index.md | 2 +- .../accessibility/wai-aria_basics/index.md | 2 +- .../video_and_audio_apis/index.md | 2 +- .../learn/performance/javascript/index.md | 2 +- .../add-ons/webextensions/api/alarms/index.md | 2 +- .../webextensions/content_scripts/index.md | 2 +- .../mozilla/firefox/releases/13/index.md | 2 +- .../en-us/mozilla/firefox/releases/5/index.md | 4 +- .../releases/5/updating_add-ons/index.md | 2 +- .../mozilla/firefox/releases/50/index.md | 2 +- .../mozilla/firefox/releases/51/index.md | 2 +- .../mozilla/firefox/releases/55/index.md | 2 +- .../mozilla/firefox/releases/56/index.md | 2 +- .../tutorial/basic_animations/index.md | 6 +- .../canvas_api/tutorial/basic_usage/index.md | 2 +- .../tutorial/optimizing_canvas/index.md | 2 +- files/en-us/web/api/clearinterval/index.md | 56 ------ files/en-us/web/api/cleartimeout/index.md | 12 +- .../microtask_guide/in_depth/index.md | 8 +- .../api/html_dom_api/microtask_guide/index.md | 2 +- .../timing_element_visibility/index.md | 4 +- .../api/rtcicecandidatestats/deleted/index.md | 2 +- .../api/rtcpeerconnection/getstats/index.md | 2 +- files/en-us/web/api/settimeout/index.md | 15 +- .../using_readable_streams/index.md | 2 +- .../using_the_web_animations_api/index.md | 20 +- .../index.md | 4 +- files/en-us/web/api/web_workers_api/index.md | 4 +- .../using_web_workers/index.md | 12 +- .../web/api/window/clearinterval/index.md | 53 ++++++ files/en-us/web/api/window/index.md | 6 +- .../api/window/requestidlecallback/index.md | 4 +- .../web/api/{ => window}/setinterval/index.md | 24 ++- .../api/window_management_api/using/index.md | 2 +- .../workerglobalscope/clearinterval/index.md | 53 ++++++ .../en-us/web/api/workerglobalscope/index.md | 6 +- .../workerglobalscope/setinterval/index.md | 72 +++++++ .../script-src/index.md | 4 +- .../javascript_technologies_overview/index.md | 12 +- files/en-us/web/media/autoplay_guide/index.md | 4 +- .../index.md | 2 +- .../web/performance/fundamentals/index.md | 4 +- 46 files changed, 379 insertions(+), 270 deletions(-) delete mode 100644 files/en-us/web/api/clearinterval/index.md create mode 100644 files/en-us/web/api/window/clearinterval/index.md rename files/en-us/web/api/{ => window}/setinterval/index.md (91%) create mode 100644 files/en-us/web/api/workerglobalscope/clearinterval/index.md create mode 100644 files/en-us/web/api/workerglobalscope/setinterval/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 8a60d1f294ea6e4..10e0a9330aafca0 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -1213,7 +1213,7 @@ /en-US/docs/DOM/DOM_Reference/event /en-US/docs/Web/API/Event /en-US/docs/DOM/DOM_Reference/style /en-US/docs/Web/API/HTMLStyleElement /en-US/docs/DOM/DOM_Reference/window /en-US/docs/Web/API/Window -/en-US/docs/DOM/DOM_Reference/window/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM/DOM_Reference/window/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM/DOM_event_handlers /en-US/docs/Web/Events/Event_handlers /en-US/docs/DOM/DOM_event_reference /en-US/docs/Web/Events /en-US/docs/DOM/DOM_event_reference/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event @@ -2082,7 +2082,7 @@ /en-US/docs/DOM/window.cancelAnimationFrame /en-US/docs/Web/API/Window/cancelAnimationFrame /en-US/docs/DOM/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/DOM/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/DOM/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/DOM/window.close /en-US/docs/Web/API/Window/close /en-US/docs/DOM/window.closed /en-US/docs/Web/API/Window/closed @@ -2229,7 +2229,7 @@ /en-US/docs/DOM/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/DOM/window.self /en-US/docs/Web/API/Window/self /en-US/docs/DOM/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/DOM/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/DOM/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/DOM/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/DOM/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/DOM/window.sidebar /en-US/docs/Web/API/Window/external @@ -2542,7 +2542,7 @@ /en-US/docs/DOM:window.blur /en-US/docs/Web/API/Window/blur /en-US/docs/DOM:window.btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/DOM:window.captureEvents /en-US/docs/Web/API/Window/captureEvents -/en-US/docs/DOM:window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/DOM:window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/DOM:window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/DOM:window.close /en-US/docs/Web/API/Window/close /en-US/docs/DOM:window.closed /en-US/docs/Web/API/Window/closed @@ -2651,7 +2651,7 @@ /en-US/docs/DOM:window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/DOM:window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/DOM:window.self /en-US/docs/Web/API/Window/self -/en-US/docs/DOM:window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/DOM:window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/DOM:window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/DOM:window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/DOM:window.sidebar /en-US/docs/Web/API/Window/external @@ -3253,7 +3253,7 @@ /en-US/docs/Document_Object_Model_(DOM)/window.URL.revokeObjectURL /en-US/docs/Web/API/URL/revokeObjectURL_static /en-US/docs/Document_Object_Model_(DOM)/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/Document_Object_Model_(DOM)/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/Document_Object_Model_(DOM)/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Document_Object_Model_(DOM)/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Document_Object_Model_(DOM)/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Document_Object_Model_(DOM)/window.close /en-US/docs/Web/API/Window/close /en-US/docs/Document_Object_Model_(DOM)/window.closed /en-US/docs/Web/API/Window/closed @@ -3370,7 +3370,7 @@ /en-US/docs/Document_Object_Model_(DOM)/window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/Document_Object_Model_(DOM)/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/Document_Object_Model_(DOM)/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/Document_Object_Model_(DOM)/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Document_Object_Model_(DOM)/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Document_Object_Model_(DOM)/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Document_Object_Model_(DOM)/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/Document_Object_Model_(DOM)/window.sidebar /en-US/docs/Web/API/Window/external @@ -10148,7 +10148,6 @@ /en-US/docs/Web/API/Window/animationend_event /en-US/docs/Web/API/Element/animationend_event /en-US/docs/Web/API/Window/animationiteration_event /en-US/docs/Web/API/Element/animationiteration_event /en-US/docs/Web/API/Window/animationstart_event /en-US/docs/Web/API/Element/animationstart_event -/en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/Window/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/Window/content /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/convertPointFromNodeToPage /en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage @@ -10213,7 +10212,6 @@ /en-US/docs/Web/API/Window/removeEventListener /en-US/docs/Web/API/EventTarget/removeEventListener /en-US/docs/Web/API/Window/resolveLocalFileSystemURL /en-US/docs/Web/API/File_and_Directory_Entries_API#resolvelocalfilesystemurl() /en-US/docs/Web/API/Window/restore /en-US/docs/Web/API/Window/moveTo -/en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/setInterval /en-US/docs/Web/API/Window/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/Window/sidebar /en-US/docs/Web/API/Window/external /en-US/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages /en-US/docs/Web/OpenSearch @@ -10254,7 +10252,7 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/atob /en-US/docs/Web/API/Window/atob /en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches /en-US/docs/Web/API/Window/caches -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap /en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated @@ -10264,19 +10262,19 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /en-US/docs/Web/API/Window/queueMicrotask /en-US/docs/Web/API/WindowOrWorkerGlobalScope/rejectionhandled_event /en-US/docs/Web/API/Window/rejectionhandled_event -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/WindowOrWorkerGlobalScope/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/WindowOrWorkerGlobalScope/unhandledrejection_event /en-US/docs/Web/API/Window/unhandledrejection_event /en-US/docs/Web/API/WindowSessionStorage /en-US/docs/Web/API/Window/sessionStorage /en-US/docs/Web/API/WindowSessionStorage.sessionStorage /en-US/docs/Web/API/Window/sessionStorage -/en-US/docs/Web/API/WindowTimers.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowTimers.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowTimers.clearTimeout /en-US/docs/Web/API/clearTimeout -/en-US/docs/Web/API/WindowTimers.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowTimers.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowTimers.setTimeout /en-US/docs/Web/API/setTimeout -/en-US/docs/Web/API/WindowTimers/clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/WindowTimers/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/WindowTimers/clearTimeout /en-US/docs/Web/API/clearTimeout -/en-US/docs/Web/API/WindowTimers/setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/WindowTimers/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/WindowTimers/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/Worker.Worker /en-US/docs/Web/API/Worker/Worker /en-US/docs/Web/API/Worker.Worker() /en-US/docs/Web/API/Worker/Worker @@ -10305,7 +10303,6 @@ /en-US/docs/Web/API/WorkerGlobalScope.performance /en-US/docs/Web/API/WorkerGlobalScope/performance /en-US/docs/Web/API/WorkerGlobalScope.self /en-US/docs/Web/API/WorkerGlobalScope/self /en-US/docs/Web/API/WorkerGlobalScope/WorkerGlobalScope.caches /en-US/docs/Web/API/WorkerGlobalScope/caches -/en-US/docs/Web/API/WorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/WorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/WorkerGlobalScope/close /en-US/docs/Web/API/DedicatedWorkerGlobalScope/close /en-US/docs/Web/API/WorkerGlobalScope/console /en-US/docs/Web/API/console @@ -10315,7 +10312,6 @@ /en-US/docs/Web/API/WorkerGlobalScope/onoffline /en-US/docs/Web/API/WorkerGlobalScope/offline_event /en-US/docs/Web/API/WorkerGlobalScope/ononline /en-US/docs/Web/API/WorkerGlobalScope/online_event /en-US/docs/Web/API/WorkerGlobalScope/requestFileSystemSync /en-US/docs/Web/API/File_and_Directory_Entries_API -/en-US/docs/Web/API/WorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval /en-US/docs/Web/API/WorkerGlobalScope/setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/WorkerLocation.hash /en-US/docs/Web/API/WorkerLocation/hash /en-US/docs/Web/API/WorkerNavigator/taintEnabled /en-US/docs/Web/API/Navigator/taintEnabled @@ -10404,6 +10400,7 @@ /en-US/docs/Web/API/atob /en-US/docs/Web/API/Window/atob /en-US/docs/Web/API/btoa /en-US/docs/Web/API/Window/btoa /en-US/docs/Web/API/caches /en-US/docs/Web/API/Window/caches +/en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/console.assert /en-US/docs/Web/API/console/assert_static /en-US/docs/Web/API/console.dir /en-US/docs/Web/API/console/dir_static /en-US/docs/Web/API/console.error /en-US/docs/Web/API/console/error_static @@ -10746,6 +10743,7 @@ /en-US/docs/Web/API/scheduler_property /en-US/docs/Web/API/Window/scheduler /en-US/docs/Web/API/select.type /en-US/docs/Web/API/HTMLSelectElement/type /en-US/docs/Web/API/sessionStorage /en-US/docs/Web/API/Window/sessionStorage +/en-US/docs/Web/API/setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/style.media /en-US/docs/Web/API/HTMLStyleElement/media /en-US/docs/Web/API/style.type /en-US/docs/Web/API/HTMLStyleElement/type @@ -10789,7 +10787,7 @@ /en-US/docs/Web/API/window.cancelAnimationFrame /en-US/docs/Web/API/Window/cancelAnimationFrame /en-US/docs/Web/API/window.captureEvents /en-US/docs/Web/API/Window/captureEvents /en-US/docs/Web/API/window.clearImmediate /en-US/docs/Web/API/Window/clearImmediate -/en-US/docs/Web/API/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/Web/API/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/Web/API/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/Web/API/window.close /en-US/docs/Web/API/Window/close /en-US/docs/Web/API/window.closed /en-US/docs/Web/API/Window/closed @@ -10938,7 +10936,7 @@ /en-US/docs/Web/API/window.scrollbars /en-US/docs/Web/API/Window/scrollbars /en-US/docs/Web/API/window.self /en-US/docs/Web/API/Window/self /en-US/docs/Web/API/window.setImmediate /en-US/docs/Web/API/Window/setImmediate -/en-US/docs/Web/API/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/Web/API/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/Web/API/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/Web/API/window.showModalDialog /en-US/docs/Web/API/Window/showModalDialog /en-US/docs/Web/API/window.sidebar /en-US/docs/Web/API/Window/external @@ -13770,7 +13768,7 @@ /en-US/docs/web/api/DOMPoint/fromPoint /en-US/docs/Web/API/DOMPoint/fromPoint_static /en-US/docs/width /en-US/docs/Web/CSS/width /en-US/docs/window.captureEvents /en-US/docs/Web/API/Window/captureEvents -/en-US/docs/window.clearInterval /en-US/docs/Web/API/clearInterval +/en-US/docs/window.clearInterval /en-US/docs/Web/API/Window/clearInterval /en-US/docs/window.clearTimeout /en-US/docs/Web/API/clearTimeout /en-US/docs/window.close /en-US/docs/Web/API/Window/close /en-US/docs/window.closed /en-US/docs/Web/API/Window/closed @@ -13813,7 +13811,7 @@ /en-US/docs/window.scrollX /en-US/docs/Web/API/Window/scrollX /en-US/docs/window.scrollY /en-US/docs/Web/API/Window/scrollY /en-US/docs/window.scrollbars /en-US/docs/Web/API/Window/scrollbars -/en-US/docs/window.setInterval /en-US/docs/Web/API/setInterval +/en-US/docs/window.setInterval /en-US/docs/Web/API/Window/setInterval /en-US/docs/window.setTimeout /en-US/docs/Web/API/setTimeout /en-US/docs/window.sidebar /en-US/docs/Web/API/Window/external /en-US/docs/window.sizeToContent /en-US/docs/Web/API/Window/sizeToContent diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index ef80cfaacde39eb..eaeaead2509401c 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -66504,6 +66504,30 @@ "McGurk" ] }, + "Web/API/Window/clearInterval": { + "modified": "2020-10-15T21:11:20.211Z", + "contributors": [ + "mileskrell", + "fscholz", + "erikadoyle", + "chrisdavidmills", + "Sheppy", + "cvrebert", + "dyagmin", + "teoli", + "Mats.Palmgren", + "ethertank", + "ziyunfei", + "fusionchess", + "qfel13", + "Nickolay", + "Taken", + "Mgjbot", + "BenoitL", + "Maian", + "JesseW" + ] + }, "Web/API/Window/close": { "modified": "2020-10-15T21:06:33.895Z", "contributors": [ @@ -68856,6 +68880,71 @@ "McGurk" ] }, + "Web/API/Window/setInterval": { + "modified": "2020-12-09T23:19:41.310Z", + "contributors": [ + "uzair-ashraf", + "SpartaSixZero", + "albedoa", + "xgqfrms", + "ankit.sangwan1999", + "Soul", + "yuedou", + "mfuji09", + "Sheppy", + "a18wheeler", + "jabcreations", + "severo", + "GusGold", + "fscholz", + "leolavaur", + "livthomas", + "chrisdavidmills", + "Anto_Rich", + "telunc", + "erikadoyle", + "nmve", + "kdex", + "teatimesoft", + "fusionchess", + "mathiasvr", + "mikemsq", + "michals", + "Jorge.villalobos", + "maybe", + "rolfedh", + "bmwolfington", + "dreamweiver", + "Sebastianz", + "dyagmin", + "jeff_mangus", + "teoli", + "kertof", + "DDERRSS", + "jonathansampson", + "iamanupmenon", + "ethertank", + "m_gol", + "dancrumb", + "brunoais", + "BrianDiPalma", + "McGurk", + "wooptoo", + "jjoemb", + "Jesse", + "HarrisonM", + "ehynds", + "Nickolay", + "aeon", + "Ceth", + "1212jtraceur", + "Mgjbot", + "Jabez", + "BenoitL", + "Dria", + "JesseW" + ] + }, "Web/API/Window/showDirectoryPicker": { "modified": "2020-12-12T15:32:04.243Z", "contributors": ["Rumyra"] @@ -70977,30 +71066,6 @@ "modified": "2019-03-23T23:49:50.843Z", "contributors": ["SphinxKnight", "teoli", "Mgjbot", "Sebuls", "JdeValk"] }, - "Web/API/clearInterval": { - "modified": "2020-10-15T21:11:20.211Z", - "contributors": [ - "mileskrell", - "fscholz", - "erikadoyle", - "chrisdavidmills", - "Sheppy", - "cvrebert", - "dyagmin", - "teoli", - "Mats.Palmgren", - "ethertank", - "ziyunfei", - "fusionchess", - "qfel13", - "Nickolay", - "Taken", - "Mgjbot", - "BenoitL", - "Maian", - "JesseW" - ] - }, "Web/API/clearTimeout": { "modified": "2020-10-15T21:09:05.105Z", "contributors": [ @@ -71528,71 +71593,6 @@ "myakura" ] }, - "Web/API/setInterval": { - "modified": "2020-12-09T23:19:41.310Z", - "contributors": [ - "uzair-ashraf", - "SpartaSixZero", - "albedoa", - "xgqfrms", - "ankit.sangwan1999", - "Soul", - "yuedou", - "mfuji09", - "Sheppy", - "a18wheeler", - "jabcreations", - "severo", - "GusGold", - "fscholz", - "leolavaur", - "livthomas", - "chrisdavidmills", - "Anto_Rich", - "telunc", - "erikadoyle", - "nmve", - "kdex", - "teatimesoft", - "fusionchess", - "mathiasvr", - "mikemsq", - "michals", - "Jorge.villalobos", - "maybe", - "rolfedh", - "bmwolfington", - "dreamweiver", - "Sebastianz", - "dyagmin", - "jeff_mangus", - "teoli", - "kertof", - "DDERRSS", - "jonathansampson", - "iamanupmenon", - "ethertank", - "m_gol", - "dancrumb", - "brunoais", - "BrianDiPalma", - "McGurk", - "wooptoo", - "jjoemb", - "Jesse", - "HarrisonM", - "ehynds", - "Nickolay", - "aeon", - "Ceth", - "1212jtraceur", - "Mgjbot", - "Jabez", - "BenoitL", - "Dria", - "JesseW" - ] - }, "Web/API/setTimeout": { "modified": "2020-10-15T21:06:28.845Z", "contributors": [ diff --git a/files/en-us/games/anatomy/index.md b/files/en-us/games/anatomy/index.md index fa81f0c08ad0240..c158ce2026c269b 100644 --- a/files/en-us/games/anatomy/index.md +++ b/files/en-us/games/anatomy/index.md @@ -214,7 +214,7 @@ Other methods of tackling the problem exist. One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards: -- Draw on `requestAnimationFrame` and update on a {{ domxref("setInterval()") }} or {{ domxref("setTimeout()") }}. +- Draw on `requestAnimationFrame()` and update on a {{domxref("Window.setInterval", "setInterval()")}} or {{domxref("setTimeout()")}}. - This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.) diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index ac89b7750016d0a..784579b62e6c891 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -67,7 +67,7 @@ drawLives(); ## Improving rendering with requestAnimationFrame() -Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("setInterval()")}}. Replace the following line: +Now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps the browser render the game better than the fixed frame rate we currently have implemented using {{domxref("Window.setInterval", "setInterval()")}}. Replace the following line: ```js interval = setInterval(draw, 10); diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 39bd8f562782367..ba224eac8fdfd62 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -15,7 +15,7 @@ You already know how to draw a ball from working through the previous article, s ## Defining a drawing loop To keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. You can run a function over and over again using a JavaScript timing function. -Later on in the tutorial, we'll see how {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("setInterval()")}} at first to create some looping logic. +Later on in the tutorial, we'll see how {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} helps with drawing, but we'll start with {{domxref("Window.setInterval", "setInterval()")}} at first to create some looping logic. Delete all the JavaScript you currently have inside your HTML file except for the first two lines, and add the following below them. The `draw()` function will be executed within `setInterval` every 10 milliseconds: diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 687278818773c96..c8307f478b91fe1 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -220,7 +220,7 @@ Let's look at a quick example — see [`aria-no-live.html`](https://github.com/m ``` -Our JavaScript uses the {{domxref("Window/fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a [`setInterval()`](/en-US/docs/Web/API/setInterval) loop that loads a new random quote into the quote box every 10 seconds: +Our JavaScript uses the {{domxref("Window.fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds: ```js const intervalID = setInterval(showQuote, 10000); diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index 35858ddb8bfbd4d..3cb670ea41af9c4 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -351,7 +351,7 @@ There are many ways that you can implement rewind and fast-forward functionality 1. We clear any classes and intervals that are set on the fast forward functionality — we do this because if we press the `rwd` button after pressing the `fwd` button, we want to cancel any fast forward functionality and replace it with the rewind functionality. If we tried to do both at once, the player would break. 2. We use an `if` statement to check whether the `active` class has been set on the `rwd` button, indicating that it has already been pressed. The {{domxref("Element.classList", "classList")}} is a rather handy property that exists on every element — it contains a list of all the classes set on the element, as well as methods for adding/removing classes, etc. We use the `classList.contains()` method to check whether the list contains the `active` class. This returns a boolean `true`/`false` result. 3. If `active` has been set on the `rwd` button, we remove it using `classList.remove()`, clear the interval that has been set when the button was first pressed (see below for more explanation), and use {{domxref("HTMLMediaElement.play()")}} to cancel the rewind and start the video playing normally. - 4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("setInterval()")}} running, you have to call {{domxref("clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function). + 4. If it hasn't yet been set, we add the `active` class to the `rwd` button using `classList.add()`, pause the video using {{domxref("HTMLMediaElement.pause()")}}, then set the `intervalRwd` variable to equal a {{domxref("Window.setInterval", "setInterval()")}} call. When invoked, `setInterval()` creates an active interval, meaning that it runs the function given as the first parameter every x milliseconds, where x is the value of the 2nd parameter. So here we are running the `windBackward()` function every 200 milliseconds — we'll use this function to wind the video backwards constantly. To stop a {{domxref("Window.setInterval", "setInterval()")}} running, you have to call {{domxref("Window.clearInterval", "clearInterval()")}}, giving it the identifying name of the interval to clear, which in this case is the variable name `intervalRwd` (see the `clearInterval()` call earlier on in the function). 3. Finally, we need to define the `windBackward()` and `windForward()` functions invoked in the `setInterval()` calls. Add the following below your two previous functions: diff --git a/files/en-us/learn/performance/javascript/index.md b/files/en-us/learn/performance/javascript/index.md index c28c3e747f30bf3..a1a75e32b9d4ab5 100644 --- a/files/en-us/learn/performance/javascript/index.md +++ b/files/en-us/learn/performance/javascript/index.md @@ -232,7 +232,7 @@ The most obvious piece of animation advice is to use less animations — cut out For essential DOM animations, you are advised to use [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) where possible, rather than JavaScript animations (the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API) provides a way to directly hook into CSS animations using JavaScript). Using the browser to directly perform DOM animations rather than manipulating inline styles using JavaScript is much faster and more efficient. See also [CSS performance optimization > Handling animations](/en-US/docs/Learn/Performance/CSS#handling_animations). -For animations that can't be handled in JavaScript, for example, animating an HTML {{htmlelement("canvas")}}, you are advised to use {{domxref("Window.requestAnimationFrame()")}} rather than older options such as {{domxref("setInterval()")}}. The `requestAnimationFrame()` method is specially designed for handling animation frames efficiently and consistently, for a smooth user experience. The basic pattern looks like this: +For animations that can't be handled in JavaScript, for example, animating an HTML {{htmlelement("canvas")}}, you are advised to use {{domxref("Window.requestAnimationFrame()")}} rather than older options such as {{domxref("Window.setInterval()")}}. The `requestAnimationFrame()` method is specially designed for handling animation frames efficiently and consistently, for a smooth user experience. The basic pattern looks like this: ```js function loop() { diff --git a/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md b/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md index 06cf1dec01e25c7..944cca413d6146e 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/alarms/index.md @@ -7,7 +7,7 @@ browser-compat: webextensions.api.alarms {{AddonSidebar}} -Schedule code to run at a specific time in the future. This is like [`setTimeout()`](/en-US/docs/Web/API/setTimeout) and [`setInterval()`](/en-US/docs/Web/API/setInterval), except that those functions don't work with background pages that are loaded on demand. +Schedule code to run at a specific time in the future. This is like [`setTimeout()`](/en-US/docs/Web/API/setTimeout), {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, except that those functions don't work with background pages that are loaded on demand. Alarms do not persist across browser sessions. They are created globally across all contexts of a single extension. E.g. alarm created in background script will fire [`onAlarm`](/en-US/docs/Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm) event in background script, options page, popup page and extension tabs (and vice versa). Alarms API is not available in [Content scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#webextension_apis). diff --git a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md index b8e7ffac1eb3f10..8fed9e86fe0e622 100644 --- a/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/content_scripts/index.md @@ -561,7 +561,7 @@ In page script, window.x: 1 In page script, window.y: undefined ``` -The same applies to [`setTimeout()`](/en-US/docs/Web/API/setTimeout), [`setInterval()`](/en-US/docs/Web/API/setInterval), and [`Function()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function). +The same applies to [`setTimeout()`](/en-US/docs/Web/API/setTimeout), {{domxref("Window.setInterval", "setInterval()")}}, and [`Function()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function). > [!WARNING] > Be very careful when running code in the context of the page! diff --git a/files/en-us/mozilla/firefox/releases/13/index.md b/files/en-us/mozilla/firefox/releases/13/index.md index aaa664d0b95e97d..79e76f5dfeb12cc 100644 --- a/files/en-us/mozilla/firefox/releases/13/index.md +++ b/files/en-us/mozilla/firefox/releases/13/index.md @@ -32,7 +32,7 @@ Firefox 13 was shipped on June 5, 2012. This page summarizes the changes in Fire ### DOM - The {{domxref("Node.cloneNode()")}} method's `deep` argument is now optional, as specified in DOM4. -- The {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} methods no longer pass an additional "lateness" argument to the callback routine. +- The {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} methods no longer pass an additional "lateness" argument to the callback routine. - The {{domxref("Blob","Blob.mozSlice()")}} method has been unprefixed. - Support for the {{domxref("Blob")}} constructor has been added. - Support for `globalStorage` has been removed. diff --git a/files/en-us/mozilla/firefox/releases/5/index.md b/files/en-us/mozilla/firefox/releases/5/index.md index 09317ea6d9015be..40c3f91bda8a400 100644 --- a/files/en-us/mozilla/firefox/releases/5/index.md +++ b/files/en-us/mozilla/firefox/releases/5/index.md @@ -41,9 +41,9 @@ Firefox 5, based on Gecko 5.0, was released on June 21, 2011. This article provi ### DOM -- The {{ domxref("selection") }} object's [`modify()`](/en-US/docs/Web/API/Selection/modify) method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation. +- The {{ domxref("selection") }} object's {{domxref("Selection.modify", "modify()")}} method has been changed so that the "word" selection granularity no longer includes trailing spaces; this makes it more consistent across platforms and matches the behavior of WebKit's implementation. - The {{ domxref("setTimeout()") }} method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to). -- Similarly, the {{ domxref("setInterval()") }} method now clamps to no more than one interval per second in inactive tabs. +- Similarly, the {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} method now clamps to no more than one interval per second in inactive tabs. - [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) now [supports the `loadend` event](/en-US/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest#detecting_any_load_end_condition) for progress listeners. This is sent after any transfer is finished (that is, after the `abort`, `error`, or `load` event). You can use this to handle any tasks that need to be performed regardless of success or failure of a transfer. - The {{ domxref("Blob") }} and, by extension, the {{ domxref("File") }} objects' `slice()` method has been removed and replaced with a new, proposed syntax that makes it more consistent with [`Array.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) and [`String.slice()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice) methods in JavaScript. This method is named `mozSlice()` for now. - The value of {{ domxref("Navigator.language") }} is now determined by looking at the value of the `Accept-Language` [HTTP header](/en-US/docs/Web/HTTP/Headers). diff --git a/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md b/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md index 2d0502d588cc02e..69d5cf6fcab182b 100644 --- a/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md +++ b/files/en-us/mozilla/firefox/releases/5/updating_add-ons/index.md @@ -29,7 +29,7 @@ In the past, the {{ domxref("Navigator.language", "window.navigator.language") } ## DOM changes -The behaviors of {{ domxref("setTimeout()") }} and {{ domxref("setInterval()") }} have changed; the minimum allowed time has changed, and [varies depending on the situation](/en-US/docs/Web/API/setTimeout#minimum_delay_and_timeout_nesting). In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at). +The behaviors of {{ domxref("setTimeout()") }}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} have changed; the minimum allowed time has changed, and [varies depending on the situation](/en-US/docs/Web/API/setTimeout#minimum_delay_and_timeout_nesting). In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at). ## JavaScript changes diff --git a/files/en-us/mozilla/firefox/releases/50/index.md b/files/en-us/mozilla/firefox/releases/50/index.md index 43ffd5af2b4f525..02e2fe2b6699f43 100644 --- a/files/en-us/mozilla/firefox/releases/50/index.md +++ b/files/en-us/mozilla/firefox/releases/50/index.md @@ -113,7 +113,7 @@ Firefox 50 was released on November 15, 2016. This article lists key changes tha - The {{domxref("PannerNode")}} interface now supports the 3D Cartesian space properties for the position ({{domxref("PannerNode.positionX")}}, {{domxref("PannerNode.positionY")}}, and {{domxref("PannerNode.positionZ")}}) and directionality ({{domxref("PannerNode.orientationX")}}, {{domxref("PannerNode.orientationY")}}, {{domxref("PannerNode.orientationZ")}}) of an audio source. - The interface {{domxref("IIRFilterNode")}}, which implements a general [infinite impulse response](https://en.wikipedia.org/wiki/Infinite_impulse_response) (IIR) filter, has been implemented. -- Throttling in background tabs of timers created by {{domxref("setInterval()")}} and {{domxref("setTimeout()")}} no longer occurs if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ([Firefox bug 1181073](https://bugzil.la/1181073)). +- Throttling in background tabs of timers created by {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, and {{domxref("setTimeout()")}} no longer occurs if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. This should help prevent issues with timing-sensitive audio playback (such as music players generating individual notes using timers) in the background ([Firefox bug 1181073](https://bugzil.la/1181073)). ### Audio/Video diff --git a/files/en-us/mozilla/firefox/releases/51/index.md b/files/en-us/mozilla/firefox/releases/51/index.md index ef45d4d13a7c408..59cda96455fce2f 100644 --- a/files/en-us/mozilla/firefox/releases/51/index.md +++ b/files/en-us/mozilla/firefox/releases/51/index.md @@ -112,7 +112,7 @@ Firefox 51 was released on January 24, 2017. This article lists key changes that - Added FLAC support ([FLAC codec](https://xiph.org/flac/index.html)) in both FLAC and Ogg containers ([Firefox bug 1195723](https://bugzil.la/1195723)). Supported FLAC MIME types are: `audio/flac` and `audio/x-flac`. For FLAC in Ogg, supported MIME types are: `audio/ogg; codecs=flac`, and `video/ogg; codecs=flac`. - Added support for FLAC in MP4 (both with and without MSE) ([Firefox bug 1303888](https://bugzil.la/1303888)). -- Throttling in background tabs of timers created by {{domxref("setInterval()")}} and {{domxref("setTimeout()")}} was changed in Firefox 50 to no longer occur if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. However, this didn't resolve all scenarios in which timing-sensitive audio playback (such as music players generating individual notes using timers) could fail to work properly. For that reason, Firefox 51 no longer throttles background tabs which have an {{domxref("AudioContext")}}, even if it's not currently playing sound. +- Throttling in background tabs of timers created by {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}}, and {{domxref("setTimeout()")}} was changed in Firefox 50 to no longer occur if a [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) {{domxref("AudioContext")}} is actively playing sound. However, this didn't resolve all scenarios in which timing-sensitive audio playback (such as music players generating individual notes using timers) could fail to work properly. For that reason, Firefox 51 no longer throttles background tabs which have an {{domxref("AudioContext")}}, even if it's not currently playing sound. ### DOM diff --git a/files/en-us/mozilla/firefox/releases/55/index.md b/files/en-us/mozilla/firefox/releases/55/index.md index 477e75256790342..8bbc9548d70450d 100644 --- a/files/en-us/mozilla/firefox/releases/55/index.md +++ b/files/en-us/mozilla/firefox/releases/55/index.md @@ -87,7 +87,7 @@ Firefox 55 was released on August 8, 2017. This article lists key changes that a #### Workers - Workers and shared workers can now be created with an identifying `name` property. See the {{domxref("Worker.Worker", "Worker()")}} and {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructors, and the {{domxref("DedicatedWorkerGlobalScope")}} and {{domxref("SharedWorkerGlobalScope")}} interfaces. ([Firefox bug 1364297](https://bugzil.la/1364297)). -- {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} are now subject to minimum interval throttling for tracking scripts in background tabs — see [Throttling of tracking timeout scripts](/en-US/docs/Web/API/setTimeout#throttling_of_tracking_timeout_scripts) ([Firefox bug 1355311](https://bugzil.la/1355311)). +- {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} are now subject to minimum interval throttling for tracking scripts in background tabs — see [Throttling of tracking timeout scripts](/en-US/docs/Web/API/setTimeout#throttling_of_tracking_timeout_scripts) ([Firefox bug 1355311](https://bugzil.la/1355311)). #### Service Workers/Push diff --git a/files/en-us/mozilla/firefox/releases/56/index.md b/files/en-us/mozilla/firefox/releases/56/index.md index 54cb1ded705b783..108f7c94631daa6 100644 --- a/files/en-us/mozilla/firefox/releases/56/index.md +++ b/files/en-us/mozilla/firefox/releases/56/index.md @@ -44,7 +44,7 @@ _No changes._ - The {{domxref("Gamepad.displayId")}} property has been implemented ([Firefox bug 1375816](https://bugzil.la/1375816)). - The {{domxref("PerformanceTiming.secureConnectionStart")}} property has been implemented ([Firefox bug 772589](https://bugzil.la/772589)). - Firefox used to accept `iso-2022-jp-2` sequences silently when an `iso-2022-jp` {{domxref("TextDecoder.TextDecoder","TextDecoder()")}} was instantiated, however this has now been removed to simplify the API, as no other browsers support it and no pages seem to use it. ([Firefox bug 715833](https://bugzil.la/715833)). -- The 4ms clamping behavior of {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} has been updated to be more in line with other browsers, as described in [Timeouts throttled to >=4ms](/en-US/docs/Web/API/setTimeout#timeouts_throttled_to_%3e4ms) ([Firefox bug 1378586](https://bugzil.la/1378586)). +- The 4ms clamping behavior of {{domxref("setTimeout()")}}, {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} has been updated to be more in line with other browsers, as described in [Timeouts throttled to >=4ms](/en-US/docs/Web/API/setTimeout#timeouts_throttled_to_%3e4ms) ([Firefox bug 1378586](https://bugzil.la/1378586)). - The [Page Visibility API's](/en-US/docs/Web/API/Page_Visibility_API) {{domxref("Document.visibilitychange_event", "onvisibilitychange")}} handler has been added ([Firefox bug 1333912](https://bugzil.la/1333912)). - The {{domxref("Window.showModalDialog()")}} method has been removed ([Firefox bug 981796](https://bugzil.la/981796)). - The implementation of the {{domxref("HTMLFormElement.action")}}, {{domxref("HTMLInputElement.formAction")}}, and {{domxref("HTMLButtonElement.formAction")}} properties has been updated so that they return the correct form submission URL, as per spec ([Firefox bug 1366361](https://bugzil.la/1366361)). diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md index 0c9dbe4285aad34..89a441e3211fc00 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md @@ -31,13 +31,13 @@ That means we need a way to execute our drawing functions over a period of time. ### Scheduled updates -First there's the {{domxref("setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("window.requestAnimationFrame()")}} functions, which can be used to call a specific function over a set period of time. +First there's the {{domxref("Window.setInterval", "setInterval()")}}, {{domxref("setTimeout()")}}, and {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} functions, which can be used to call a specific function over a set period of time. -- {{domxref("setInterval()")}} +- {{domxref("Window.setInterval", "setInterval()")}} - : Starts repeatedly executing the function specified by `function` every `delay` milliseconds. - {{domxref("setTimeout()")}} - : Executes the function specified by `function` in `delay` milliseconds. -- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} +- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} - : Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. If you don't want any user interaction you can use the `setInterval()` function, which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use `setTimeout()`. By setting listeners using {{domxref("EventTarget/addEventListener", "addEventListener()")}}, we catch any user interaction and execute our animation functions. diff --git a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md index 7e483dcab44db8d..ee59a5d5ebb6de2 100644 --- a/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md @@ -111,7 +111,7 @@ Here is a minimalistic template, which we'll be using as a starting point for la ``` -The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by listening for the {{domxref("Window/load_event", "load")}} event on the document. This function, or one like it, could also be called using {{domxref("setTimeout()")}}, {{domxref("setInterval()")}}, or any other event handler, as long as the page has been loaded first. +The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by listening for the {{domxref("Window/load_event", "load")}} event on the document. This function, or one like it, could also be called using {{domxref("setTimeout()")}}, {{domxref("Window.setInterval", "setInterval()")}}, or any other event handler, as long as the page has been loaded first. Here is how a template would look in action. As shown here, it is initially blank. diff --git a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md index ca9fbb4d20775cd..e9c0b4857320a88 100644 --- a/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/en-us/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -130,7 +130,7 @@ canvas.style.height = `${rect.height}px`; - Avoid the {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} property whenever possible. - Avoid [text rendering](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text) whenever possible. - Try different ways to clear the canvas ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. resizing the canvas). -- With animations, use {{domxref("window.requestAnimationFrame()")}} instead of {{domxref("setInterval()")}}. +- With animations, use {{domxref("Window.requestAnimationFrame()")}} instead of {{domxref("Window.setInterval", "setInterval()")}}. - Be careful with heavy physics libraries. ## See also diff --git a/files/en-us/web/api/clearinterval/index.md b/files/en-us/web/api/clearinterval/index.md deleted file mode 100644 index 49bbec137def72b..000000000000000 --- a/files/en-us/web/api/clearinterval/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: clearInterval() global function -short-title: clearInterval() -slug: Web/API/clearInterval -page-type: web-api-global-function -browser-compat: api.clearInterval ---- - -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} - -The global **`clearInterval()`** method cancels a timed, repeating action which -was previously established by a call to {{domxref("setInterval", "setInterval()")}}. -If the parameter provided does not identify a previously established action, -this method does nothing. - -## Syntax - -```js-nolint -clearInterval(intervalID) -``` - -### Parameters - -- `intervalID` - - : The identifier of the repeated action you want to cancel. This ID was returned by - the corresponding call to `setInterval()`. - -It's worth noting that the pool of IDs used by -{{domxref("setInterval", "setInterval()")}} and -{{domxref("setTimeout()")}} are shared, which -means you can technically use `clearInterval()` and -{{domxref("clearTimeout", "clearTimeout()")}} interchangeably. -However, for clarity, you should avoid doing so. - -### Return value - -None ({{jsxref("undefined")}}). - -## Examples - -See the [`setInterval()` examples](/en-US/docs/Web/API/setInterval#examples). - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/cleartimeout/index.md b/files/en-us/web/api/cleartimeout/index.md index 342b6ba232bc56a..f42d466887e48a2 100644 --- a/files/en-us/web/api/cleartimeout/index.md +++ b/files/en-us/web/api/cleartimeout/index.md @@ -26,12 +26,7 @@ clearTimeout(timeoutID) - : The identifier of the timeout you want to cancel. This ID was returned by the corresponding call to `setTimeout()`. -It's worth noting that the pool of IDs used by -{{domxref("setTimeout()")}} and -{{domxref("setInterval()")}} are shared, which -means you can technically use `clearTimeout()` and -{{domxref("clearInterval", "clearInterval()")}} -interchangeably. However, for clarity, you should avoid doing so. +It's worth noting that the pool of IDs used by {{domxref("setTimeout()")}} and {{domxref("Window.setInterval", "setInterval()")}} are shared, which means you can technically use `clearTimeout()` and {{domxref("Window.clearInterval", "clearInterval()")}} interchangeably. However, for clarity, you should avoid doing so. ### Return value @@ -87,6 +82,5 @@ exception is thrown. ## See also - {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("clearInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md index a864c9342db66ae..f32392e1bd21e6e 100644 --- a/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md +++ b/files/en-us/web/api/html_dom_api/microtask_guide/in_depth/index.md @@ -12,7 +12,7 @@ JavaScript is an inherently single-threaded language. It was designed in an era As time passed, of course, we know that computers have evolved into powerful multi-core systems, and JavaScript has become one of the most prolifically-used languages in the computing world. A vast number of the most popular applications are based at least in part on JavaScript code. To support this, it was necessary to find ways to allow for projects to escape the limitations of a single-threaded language. -Starting with the addition of timeouts and intervals as part of the Web API ({{domxref("setTimeout()")}} and {{domxref("setInterval()")}}), the JavaScript environment provided by Web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. To understand where {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} comes into play here, it's helpful to understand how the JavaScript runtime operates when scheduling and running code. +Starting with the addition of timeouts and intervals as part of the Web API ({{domxref("setTimeout()")}} and {{domxref("Window.setInterval", "setInterval()")}}), the JavaScript environment provided by Web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth. To understand where {{domxref("Window.queueMicrotask()", "queueMicrotask()")}} comes into play here, it's helpful to understand how the JavaScript runtime operates when scheduling and running code. ## JavaScript execution contexts @@ -105,7 +105,7 @@ There are three types of event loop: - Worker event loop - : A worker event loop is one which drives a worker; this includes all forms of workers, including basic [web workers](/en-US/docs/Web/API/Web_Workers_API), [shared workers](/en-US/docs/Web/API/SharedWorker), and [service workers](/en-US/docs/Web/API/Service_Worker_API). Workers are kept in one or more agents that are separate from the "main" code; the browser may use a single event loop for all of the workers of a given type or may use multiple event loops to handle them. - Worklet event loop - - : A [worklet](/en-US/docs/Web/API/Worklet) event loop is the event loop used to drive agents which run the code for the worklets for a given agent. This includes worklets of type {{domxref("Worklet")}} and {{domxref("AudioWorklet")}}. + - : A {{domxref("Worklet", "worklet", "", 1)}} event loop is the event loop used to drive agents which run the code for the worklets for a given agent. This includes worklets of type {{domxref("Worklet")}} and {{domxref("AudioWorklet")}}. Several windows loaded from the same {{Glossary("origin")}} may be running on the same event loop, each queueing tasks onto the event loop so that their tasks take turns with the processor, one after another. Keep in mind that in web parlance, the word "window" actually means "browser-level container that web content runs within," including an actual window, a tab, or a frame. @@ -119,7 +119,7 @@ The specifics may vary from browser to browser, depending on how they're impleme #### Tasks vs. microtasks -A **task** is anything scheduled to be run by the standard mechanisms such as initially starting to execute a script, asynchronously dispatching an event, and so forth. Other than by using events, you can enqueue a task by using {{domxref("setTimeout()")}} or {{domxref("setInterval()")}}. +A **task** is anything scheduled to be run by the standard mechanisms such as initially starting to execute a script, asynchronously dispatching an event, and so forth. Other than by using events, you can enqueue a task by using {{domxref("setTimeout()")}} or {{domxref("Window.setInterval", "setInterval()")}}. The difference between the task queue and the microtask queue is simple but very important: @@ -136,7 +136,7 @@ When multiple programs and multiple code objects within those programs start to The use of [web workers](/en-US/docs/Web/API/Web_Workers_API), which allow the main script to run other scripts in new threads, help to alleviate this problem. A well-designed website or app uses workers to perform any complex or lengthy operations, leaving the main thread to do as little work as possible beyond updating, laying out, and rendering the web page. -This is further alleviated by using [asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous) techniques such as [promises](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to allow the main code to continue to run while waiting for the results of a request. However, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. +This is further alleviated by using [asynchronous JavaScript](/en-US/docs/Learn/JavaScript/Asynchronous) techniques such as {{jsxref("Global_Objects/Promise", "promises", "", 1)}} to allow the main code to continue to run while waiting for the results of a request. However, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the results of any single request or task. Microtasks are another solution to this problem, providing a finer degree of access by making it possible to schedule code to run before the next iteration of the event loop begins, instead of having to wait until the next one. diff --git a/files/en-us/web/api/html_dom_api/microtask_guide/index.md b/files/en-us/web/api/html_dom_api/microtask_guide/index.md index 636d2be2ee4d99a..7c796c12640512a 100644 --- a/files/en-us/web/api/html_dom_api/microtask_guide/index.md +++ b/files/en-us/web/api/html_dom_api/microtask_guide/index.md @@ -24,7 +24,7 @@ For example, tasks get added to the task queue when: - A new JavaScript program or subprogram is executed (such as from a console, or by running the code in a {{HTMLElement("script")}} element) directly. - The user clicks an element. A task is then created and executes all event callbacks. -- A timeout or interval created with {{domxref("setTimeout()")}} or {{domxref("setInterval()")}} is reached, causing the corresponding callback to be added to the task queue. +- A timeout or interval created with {{domxref("setTimeout()")}} or {{domxref("Window.setInterval", "setInterval()")}} is reached, causing the corresponding callback to be added to the task queue. The event loop driving your code handles these tasks one after another, in the order in which they were enqueued. The oldest runnable task in the task queue will be executed during a single iteration of the event loop. After that, microtasks will be executed until the microtask queue is empty, and then the browser may choose to update rendering. Then the browser moves on to the next iteration of event loop. diff --git a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md index 24b153be706a54c..cf7c4fb265ad092 100644 --- a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md +++ b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md @@ -219,7 +219,7 @@ These are used as follows: - `adObserver` - : Will hold our {{domxref("IntersectionObserver")}} used to track the intersection between the ads and the `
` element's bounds. - `refreshIntervalID` - - : Used to store the interval ID returned by {{domxref("setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content. + - : Used to store the interval ID returned by {{domxref("Window.setInterval", "setInterval()")}}. This interval will be used to trigger our periodic refreshes of the ads' content. #### Setting up @@ -320,7 +320,7 @@ If the ad has transitioned to the not-intersecting state, we remove the ad from #### Handling periodic actions -Our interval handler, `handleRefreshInterval()`, is called about once per second courtesy of the call to {{domxref("setInterval()")}} made in the `startup()` function [described above](#setting_up). Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad. +Our interval handler, `handleRefreshInterval()`, is called about once per second courtesy of the call to {{domxref("Window.setInterval", "setInterval()")}} made in the `startup()` function [described above](#setting_up). Its main job is to update the timers every second and schedule a redraw to update the timers we'll be drawing within each ad. ```js function handleRefreshInterval() { diff --git a/files/en-us/web/api/rtcicecandidatestats/deleted/index.md b/files/en-us/web/api/rtcicecandidatestats/deleted/index.md index 14001e60bd28748..17ae33caa156f19 100644 --- a/files/en-us/web/api/rtcicecandidatestats/deleted/index.md +++ b/files/en-us/web/api/rtcicecandidatestats/deleted/index.md @@ -35,7 +35,7 @@ value is `true`. ## Examples -In this example, {{domxref("setInterval()")}} +In this example, {{domxref("Window.setInterval", "setInterval()")}} is used to set up a function that runs periodically to display the latest statistics for candidates. Only candidates which have not been deleted are included in the output. diff --git a/files/en-us/web/api/rtcpeerconnection/getstats/index.md b/files/en-us/web/api/rtcpeerconnection/getstats/index.md index 202e414aefd2590..0f2e1d61c9d4787 100644 --- a/files/en-us/web/api/rtcpeerconnection/getstats/index.md +++ b/files/en-us/web/api/rtcpeerconnection/getstats/index.md @@ -53,7 +53,7 @@ This method does not throw exceptions; instead, it rejects the returned promise ## Examples This example creates a periodic function using -{{domxref("setInterval()")}} that collects +{{domxref("Window.setInterval", "setInterval()")}} that collects statistics for an {{domxref("RTCPeerConnection")}} every second, generating an HTML-formatted report and inserting it into a specific element in the DOM. diff --git a/files/en-us/web/api/settimeout/index.md b/files/en-us/web/api/settimeout/index.md index 33b974e39119f1a..dba8d0a52d56c7c 100644 --- a/files/en-us/web/api/settimeout/index.md +++ b/files/en-us/web/api/settimeout/index.md @@ -61,11 +61,9 @@ a worker) while the timer is still active. However, different objects use separa ## Description -Timeouts are cancelled using -{{domxref("clearTimeout()")}}. +Timeouts are cancelled using {{domxref("clearTimeout()")}}. -To call a function repeatedly (e.g., every _N_ milliseconds), consider using -{{domxref("setInterval()")}}. +To call a function repeatedly (e.g., every _N_ milliseconds), consider using {{domxref("Window.setInterval", "setInterval()")}}. ### Non-number delay values are silently coerced into numbers @@ -462,8 +460,7 @@ See also the [`clearTimeout()` example](/en-US/docs/Web/API/clearTimeout#example ## See also - [Polyfill of `setTimeout` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("clearTimeout")}} -- {{domxref("setInterval()")}} -- {{domxref("Window.requestAnimationFrame")}} -- {{domxref("Window.queueMicrotask()")}} -- {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("Window.queueMicrotask()")}} and {{domxref("WorkerGlobalScope.queueMicrotask()")}} diff --git a/files/en-us/web/api/streams_api/using_readable_streams/index.md b/files/en-us/web/api/streams_api/using_readable_streams/index.md index 845a4c5822cfdf1..2ed3af55ca25711 100644 --- a/files/en-us/web/api/streams_api/using_readable_streams/index.md +++ b/files/en-us/web/api/streams_api/using_readable_streams/index.md @@ -516,7 +516,7 @@ But a custom stream is still a `ReadableStream` instance, meaning you can attach > [!NOTE] > In order to consume a stream using {{domxref("FetchEvent.respondWith()")}}, the enqueued stream contents must be of type {{jsxref("Uint8Array")}}; for example, encoded using {{domxref("TextEncoder")}}. -The custom stream constructor has a `start()` method that uses a {{domxref("setInterval()")}} call to generate a random string every second. {{domxref("ReadableStreamDefaultController.enqueue()")}} is then used to enqueue it into the stream. When the button is pressed, the interval is cancelled, and a function called `readStream()` is invoked to read the data back out of the stream again. We also close the stream, as we've stopped enqueuing chunks to it. +The custom stream constructor has a `start()` method that uses a {{domxref("Window.setInterval", "setInterval()")}} call to generate a random string every second. {{domxref("ReadableStreamDefaultController.enqueue()")}} is then used to enqueue it into the stream. When the button is pressed, the interval is cancelled, and a function called `readStream()` is invoked to read the data back out of the stream again. We also close the stream, as we've stopped enqueuing chunks to it. ```js let interval; diff --git a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md index ac48da4881e2e88..b647bfd4cacfc7d 100644 --- a/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md +++ b/files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md @@ -46,7 +46,7 @@ Notice that the background moves, Alice spins, and her color changes at an offse } ``` -This changes Alice's color and her transform's rotation over 3 seconds at a constant (linear) rate and loops infinitely. In the [@keyframes](/en-US/docs/Web/CSS/@keyframes) block we can see that 30% of the way through each loop (about .9 seconds in), Alice's color changes from black to a deep burgundy then back again by the end of the loop. +This changes Alice's color and her transform's rotation over 3 seconds at a constant (linear) rate and loops infinitely. In the {{cssxref("@keyframes")}} block we can see that 30% of the way through each loop (about .9 seconds in), Alice's color changes from black to a deep burgundy then back again by the end of the loop. ### Moving it to JavaScript @@ -54,7 +54,7 @@ Now let's try creating the same animation with the Web Animations API. #### Representing keyframes -The first thing we need is to create a [Keyframe Object](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) corresponding to our CSS [@keyframes](/en-US/docs/Web/CSS/@keyframes) block: +The first thing we need is to create a [Keyframe Object](/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) corresponding to our CSS {{cssxref("@keyframes")}} block: ```js const aliceTumbling = [ @@ -89,7 +89,7 @@ You'll notice a few differences here from how equivalent values are represented - The other thing you'll notice is that it's `iterations`, not `iteration-count`. > [!NOTE] -> There are a number of small differences between the terminology used in CSS Animations and the terminology used in Web Animations. For instance, Web Animations doesn't use the string `"infinite"`, but instead uses the JavaScript keyword `Infinity`. And instead of `timing-function` we use `easing`. We aren't listing an `easing` value here because, unlike CSS Animations where the default [animation-timing-function](/en-US/docs/Web/CSS/animation-timing-function) is `ease`, in the Web Animations API the default easing is `linear` — which is what we want here. +> There are a number of small differences between the terminology used in CSS Animations and the terminology used in Web Animations. For instance, Web Animations doesn't use the string `"infinite"`, but instead uses the JavaScript keyword `Infinity`. And instead of `timing-function` we use `easing`. We aren't listing an `easing` value here because, unlike CSS Animations where the default {{cssxref("animation-timing-function")}} is `ease`, in the Web Animations API the default easing is `linear` — which is what we want here. #### Bring the pieces together @@ -257,11 +257,11 @@ Animations are removed when all of the following are true: The first four conditions ensure that, without intervention by JavaScript code, the animation's effect will never change or end. The last condition ensures that the animation will never actually affect the style of any element: it has been entirely replaced. -When the animation is automatically removed, the animation's {{domxref("animation/remove_event", "remove")}} event fires. +When the animation is automatically removed, the animation's {{domxref("Animation/remove_event", "remove")}} event fires. To prevent the browser from automatically removing animations, call the animation's {{domxref("Animation.persist", "persist()")}} method. -The animation's {{domxref("animation.replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise. +The animation's {{domxref("Animation.replaceState", "replaceState")}} property will be `removed` if the animation has been removed, `persisted` if you have called {{domxref("Animation.persist", "persist()")}} on the animation, or `active` otherwise. ## Getting information out of animations @@ -319,7 +319,7 @@ But while working on this animation, we might change Alice's duration a lot. Wou aliceChange.currentTime = aliceChange.effect.getComputedTiming().duration / 2; ``` -`effect` lets us access the animation's keyframes and timing properties — `aliceChange.effect.getComputedTiming()` points to Alice's timing object — this contains her [`duration`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect). We can divide her duration in half to get the midpoint for her animation's timeline, setting her to be normal height. Now we can reverse and play her animation in either direction to make her grow smaller or larger! +`effect` lets us access the animation's keyframes and timing properties — `aliceChange.effect.getComputedTiming()` points to Alice's timing object — this contains her {{domxref("KeyframeEffect.KeyframeEffect", "duration")}}. We can divide her duration in half to get the midpoint for her animation's timeline, setting her to be normal height. Now we can reverse and play her animation in either direction to make her grow smaller or larger! And we can do the same thing when setting the cake and bottle durations: @@ -335,7 +335,7 @@ drinking.pause(); Now all three animations are linked to just one duration, which we can change easily from one place. -We can also use the Web Animations API to figure out the animation's current time. The game ends when you run out of cake to eat or empty the bottle. Which vignette players are presented with depends on how far along Alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. We can figure out whether she's on the large end or small end of her animation by getting her animation's [`currentTime`](/en-US/docs/Web/API/Animation/currentTime) and dividing it by her `activeDuration`: +We can also use the Web Animations API to figure out the animation's current time. The game ends when you run out of cake to eat or empty the bottle. Which vignette players are presented with depends on how far along Alice was in her animation, whether she grew too big and can't get in the tiny door anymore or too small and cannot reach the key to open the door. We can figure out whether she's on the large end or small end of her animation by getting her animation's {{domxref("Animation.currentTime", "currentTime")}} and dividing it by her `activeDuration`: ```js const endGame = () => { @@ -366,8 +366,8 @@ const endGame = () => { CSS Animations and Transitions have their own event listeners, and these are also possible with the Web Animations API: -- [`onfinish`](/en-US/docs/Web/API/Animation/finish_event) is the event handler for the `finish` event and can be triggered manually with [`finish()`](/en-US/docs/Web/API/Animation/finish). -- [`oncancel`](/en-US/docs/Web/API/Animation/cancel_event) is the event handler for the `cancel` event and can be triggers with [`cancel()`](/en-US/docs/Web/API/Animation/cancel). +- {{domxref("Animation/finish_event", "onfinish")}} is the event handler for the `finish` event and can be triggered manually with {{domxref("Animation/finish", "finish()")}}. +- {{domxref("Animation/cancel_event", "oncancel")}} is the event handler for the `cancel` event and can be triggers with {{domxref("Animation.cancel", "cancel()")}}. Here we set the callbacks for the cake, bottle, and Alice to fire the `endGame` function: @@ -380,7 +380,7 @@ drinking.onfinish = endGame; aliceChange.onfinish = endGame; ``` -Better still, the Web Animations API also provides a [`finished`](/en-US/docs/Web/API/Animation/finished) promise that will resolve when the animation finishes, or reject if it is canceled. +Better still, the Web Animations API also provides a {{domxref("Animation.finished", "finished")}} promise that will resolve when the animation finishes, or reject if it is canceled. ## Conclusion diff --git a/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index e951c114a0875e0..f95265b72c161a3 100644 --- a/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/en-us/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -20,14 +20,14 @@ Some of the functions (a subset) that are common to all workers and to the main - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} - {{domxref("clearTimeout()")}} - {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} - {{domxref("WorkerGlobalScope.reportError()", "reportError()")}} -- {{domxref("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} (dedicated workers only) diff --git a/files/en-us/web/api/web_workers_api/index.md b/files/en-us/web/api/web_workers_api/index.md index ac5ba1998f6d990..de1d5ad28b2c917 100644 --- a/files/en-us/web/api/web_workers_api/index.md +++ b/files/en-us/web/api/web_workers_api/index.md @@ -44,14 +44,14 @@ Some of the functions (a subset) that are common to all workers and to the main - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} - {{domxref("clearTimeout()")}} - {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} - {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} - {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} - {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} - {{domxref("WorkerGlobalScope.reportError()", "reportError()")}} -- {{domxref("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}} (dedicated workers only) diff --git a/files/en-us/web/api/web_workers_api/using_web_workers/index.md b/files/en-us/web/api/web_workers_api/using_web_workers/index.md index 1692737287bc6bc..de669f1a8511dc1 100644 --- a/files/en-us/web/api/web_workers_api/using_web_workers/index.md +++ b/files/en-us/web/api/web_workers_api/using_web_workers/index.md @@ -825,14 +825,14 @@ To learn how to debug web workers, see the documentation for each browser's Java You can use most standard JavaScript features inside a web worker, including: - {{domxref("Navigator")}} -- {{domxref("WorkerGlobalScope/fetch", "fetch()")}} +- {{domxref("WorkerGlobalScope.fetch", "fetch()")}} - {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}} -- {{domxref("setTimeout()")}} and {{domxref("setInterval()")}} +- {{domxref("setTimeout()")}} and {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} The main thing you _can't_ do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then doing the changes in event handler. > [!NOTE] -> You can test whether a method is available to workers using the site: . For example, if you enter [EventSource](/en-US/docs/Web/API/EventSource) into the site on Firefox 84 you'll see that this is not supported in service workers, but is in dedicated and shared workers. +> You can test whether a method is available to workers using the site: . For example, if you enter {{domxref("EventSource")}} into the site on Firefox 84 you'll see that this is not supported in service workers, but is in dedicated and shared workers. > [!NOTE] > For a complete list of functions available to workers, see [Functions and interfaces available to workers](/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers). @@ -843,7 +843,7 @@ The main thing you _can't_ do in a Worker is directly affect the parent page. Th ## See also -- [`Worker`](/en-US/docs/Web/API/Worker) interface -- [`SharedWorker`](/en-US/docs/Web/API/SharedWorker) interface +- {{domxref("Worker")}} interface +- {{domxref("SharedWorker")}} interface - [Functions available to workers](/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) -- [`OffscreenCanvas`](/en-US/docs/Web/API/OffscreenCanvas) interface +- {{domxref("OffscreenCanvas")}} interface diff --git a/files/en-us/web/api/window/clearinterval/index.md b/files/en-us/web/api/window/clearinterval/index.md new file mode 100644 index 000000000000000..5287e9ca522a557 --- /dev/null +++ b/files/en-us/web/api/window/clearinterval/index.md @@ -0,0 +1,53 @@ +--- +title: "Window: clearInterval() method" +short-title: clearInterval() +slug: Web/API/Window/clearInterval +page-type: web-api-instance-method +browser-compat: api.clearInterval +--- + +{{APIRef("HTML DOM")}} + +The **`clearInterval()`** method of the {{domxref("Window")}} interface cancels a timed, repeating action which was previously established by a call to {{domxref("Window.setInterval", "setInterval()")}}. If the parameter provided does not identify a previously established action, this method does nothing. + +## Syntax + +```js-nolint +clearInterval(intervalID) +``` + +### Parameters + +- `intervalID` + - : The identifier of the repeated action you want to cancel. This ID was returned by + the corresponding call to `setInterval()`. + +It's worth noting that the pool of IDs used by +{{domxref("Window.setInterval", "setInterval()")}} and +{{domxref("setTimeout()")}} are shared, which +means you can technically use `clearInterval()` and +{{domxref("Window.clearInterval", "clearInterval()")}} interchangeably. +However, for clarity, you should avoid doing so. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md index 1356930751616af..2e003705bfdfb05 100644 --- a/files/en-us/web/api/window/index.md +++ b/files/en-us/web/api/window/index.md @@ -177,8 +177,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Enables you to cancel a callback previously scheduled with {{domxref("Window.requestAnimationFrame")}}. - {{domxref("Window.cancelIdleCallback()")}} - : Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}. -- {{domxref("clearInterval", "Window.clearInterval()")}} - - : Cancels the repeated execution set using {{domxref("setInterval()")}}. +- {{domxref("Window.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("Window.setInterval()")}}. - {{domxref("clearTimeout()", "Window.clearTimeout()")}} - : Cancels the delayed execution set using {{domxref("setTimeout()")}}. - {{domxref("Window.close()")}} @@ -241,7 +241,7 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Scrolls the current document by the specified number of pages. - {{domxref("Window.scrollTo()")}} - : Scrolls to a particular set of coordinates in the document. -- {{domxref("setInterval", "Window.setInterval()")}} +- {{domxref("Window.setInterval()")}} - : Schedules a function to execute every time a given number of milliseconds elapses. - {{domxref("setTimeout()", "Window.setTimeout()")}} - : Schedules a function to execute in a given amount of time. diff --git a/files/en-us/web/api/window/requestidlecallback/index.md b/files/en-us/web/api/window/requestidlecallback/index.md index 2519655ce62e55f..c49a0176eb77520 100644 --- a/files/en-us/web/api/window/requestidlecallback/index.md +++ b/files/en-us/web/api/window/requestidlecallback/index.md @@ -68,5 +68,5 @@ in the article [Cooperative Scheduling of Background Tasks API](/en-US/docs/Web/ - {{domxref("window.cancelIdleCallback()")}} - {{domxref("IdleDeadline")}} - {{domxref("setTimeout()")}} -- {{domxref("setInterval()")}} -- {{domxref("window.requestAnimationFrame")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/setinterval/index.md b/files/en-us/web/api/window/setinterval/index.md similarity index 91% rename from files/en-us/web/api/setinterval/index.md rename to files/en-us/web/api/window/setinterval/index.md index 67eda06f525cd03..96f2aa2bbaf3a40 100644 --- a/files/en-us/web/api/setinterval/index.md +++ b/files/en-us/web/api/window/setinterval/index.md @@ -1,16 +1,16 @@ --- -title: setInterval() global function +title: "Window: setInterval() method" short-title: setInterval() -slug: Web/API/setInterval -page-type: web-api-global-function +slug: Web/API/Window/setInterval +page-type: web-api-instance-method browser-compat: api.setInterval --- -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} +{{APIRef("HTML DOM")}} -The **`setInterval()`** method, offered on the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. +The **`setInterval()`** method of the {{domxref("Window")}} interface repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. -This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("clearInterval", "clearInterval()")}}. +This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("Window.clearInterval", "clearInterval()")}}. ## Syntax @@ -40,7 +40,7 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN) ### Return value -The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("clearInterval()")}} to cancel the interval. +The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("Window.clearInterval", "clearInterval()")}} to cancel the interval. It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout", "clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code. @@ -124,8 +124,6 @@ document.getElementById("stop").addEventListener("click", stopTextColor); {{EmbedLiveSample("Example_2:_Alternating_two_colors")}} -See also: [`clearInterval()`](/en-US/docs/Web/API/clearInterval). - ## The "this" problem When you pass a method to `setInterval()` or any other function, it is invoked with the wrong [`this`](/en-US/docs/Web/JavaScript/Reference/Operators/this) value. @@ -174,7 +172,7 @@ If you need to support IE, use the [`Function.prototype.bind()`](/en-US/docs/Web The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using -{{domxref("clearInterval()")}}. +{{domxref("Window.clearInterval", "clearInterval()")}}. If you wish to have your function called _once_ after the specified delay, use {{domxref("setTimeout()")}}. @@ -235,6 +233,6 @@ interval has completed before recursing. - [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) - {{domxref("setTimeout()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("clearInterval()")}} -- {{domxref("window.requestAnimationFrame()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/en-us/web/api/window_management_api/using/index.md b/files/en-us/web/api/window_management_api/using/index.md index 89a185936d246c2..3a84ad84646d207 100644 --- a/files/en-us/web/api/window_management_api/using/index.md +++ b/files/en-us/web/api/window_management_api/using/index.md @@ -124,7 +124,7 @@ function checkWindowClose() { ``` > [!NOTE] -> In our experiments, the {{domxref("setInterval()")}} polling method shown above seemed to work best for detecting window closure in the case of multiple windows. Using events such as {{domxref("Window.beforeunload_event", "beforeunload")}}, {{domxref("Window.pagehide_event", "pagehide")}}, or {{domxref("Document.visibilitychange_event", "visibilitychange")}} proved unreliable because, when opening multiple windows at the same time, the rapid shift in focus/visibility seemed to fire the handler function prematurely. +> In our experiments, the {{domxref("Window.setInterval", "setInterval()")}} polling method shown above seemed to work best for detecting window closure in the case of multiple windows. Using events such as {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/pagehide_event", "pagehide")}}, or {{domxref("Document/visibilitychange_event", "visibilitychange")}} proved unreliable because, when opening multiple windows at the same time, the rapid shift in focus/visibility seemed to fire the handler function prematurely. > [!NOTE] > One concern with the above example is that it uses constant values to represent the size of the Chrome window UI portions in the calculations — `WINDOW_CHROME_X` and `WINDOW_CHROME_Y` — to get the window size calculations correct. To create precisely-sized windows on other future implementations of the API, you'd need to keep a small library of browser chrome sizes, and employ browser detection to discover which browser is rendering your app and choose the correct size for calculations. Or you can rely on less precise window sizes. diff --git a/files/en-us/web/api/workerglobalscope/clearinterval/index.md b/files/en-us/web/api/workerglobalscope/clearinterval/index.md new file mode 100644 index 000000000000000..f7271a79d1d3136 --- /dev/null +++ b/files/en-us/web/api/workerglobalscope/clearinterval/index.md @@ -0,0 +1,53 @@ +--- +title: "WorkerGlobalScope: clearInterval() method" +short-title: clearInterval() +slug: Web/API/WorkerGlobalScope/clearInterval +page-type: web-api-instance-method +browser-compat: api.clearInterval +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +The **`clearInterval()`** method of the {{domxref("WorkerGlobalScope")}} interface cancels a timed, repeating action which was previously established by a call to {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}}. If the parameter provided does not identify a previously established action, this method does nothing. + +## Syntax + +```js-nolint +clearInterval(intervalID) +``` + +### Parameters + +- `intervalID` + - : The identifier of the repeated action you want to cancel. This ID was returned by + the corresponding call to `setInterval()`. + +It's worth noting that the pool of IDs used by +{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} and +{{domxref("setTimeout()")}} are shared, which +means you can technically use `clearInterval()` and +{{domxref("clearTimeout", "clearTimeout()")}} interchangeably. +However, for clarity, you should avoid doing so. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} and {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/en-us/web/api/workerglobalscope/index.md b/files/en-us/web/api/workerglobalscope/index.md index 16fad76cf77033a..830d0c3d7eced76 100644 --- a/files/en-us/web/api/workerglobalscope/index.md +++ b/files/en-us/web/api/workerglobalscope/index.md @@ -54,8 +54,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Decodes a string of data which has been encoded using base-64 encoding. - {{domxref("WorkerGlobalScope.btoa()")}} - : Creates a base-64 encoded {{Glossary("ASCII")}} string from a string of binary data. -- {{domxref("clearInterval()", "WorkerGlobalScope.clearInterval()")}} - - : Cancels the repeated execution set using {{domxref("setInterval()")}}. +- {{domxref("WorkerGlobalScope.clearInterval()")}} + - : Cancels the repeated execution set using {{domxref("WorkerGlobalScope.setInterval()")}}. - {{domxref("clearTimeout()", "WorkerGlobalScope.clearTimeout()")}} - : Cancels the delayed execution set using {{domxref("setTimeout()")}}. - {{domxref("WorkerGlobalScope.createImageBitmap()")}} @@ -68,7 +68,7 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Imports one or more scripts into the worker's scope. You can specify as many as you'd like, separated by commas. For example: `importScripts('foo.js', 'bar.js');`. - {{domxref("WorkerGlobalScope.queueMicrotask()")}} - : Queues a microtask to be executed at a safe time prior to control returning to the browser's event loop. -- {{domxref("setInterval()", "WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} - : Schedules a function to execute every time a given number of milliseconds elapses. - {{domxref("setTimeout()", "WorkerGlobalScope.setTimeout()")}} - : Schedules a function to execute in a given amount of time. diff --git a/files/en-us/web/api/workerglobalscope/setinterval/index.md b/files/en-us/web/api/workerglobalscope/setinterval/index.md new file mode 100644 index 000000000000000..ab0e6dd8cd1dcce --- /dev/null +++ b/files/en-us/web/api/workerglobalscope/setinterval/index.md @@ -0,0 +1,72 @@ +--- +title: "WorkerGlobalScope: setInterval() method" +short-title: setInterval() +slug: Web/API/WorkerGlobalScope/setInterval +page-type: web-api-instance-method +browser-compat: api.setInterval +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +The **`setInterval()`** method of the {{domxref("WorkerGlobalScope")}} interface repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. + +This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}}. + +This method is also available in window contexts: for a detailed description of `setInterval()`, see the {{domxref("Window.setInterval()")}} page. + +## Syntax + +```js-nolint +setInterval(code) +setInterval(code, delay) + +setInterval(func) +setInterval(func, delay) +setInterval(func, delay, arg1) +setInterval(func, delay, arg1, arg2) +setInterval(func, delay, arg1, arg2, /* …, */ argN) +``` + +### Parameters + +- `func` + - : A {{jsxref("function")}} to be executed every `delay` milliseconds. The first execution happens after `delay` milliseconds. +- `code` + - : An optional syntax allows you to include a string instead of a function, which is compiled and executed every `delay` milliseconds. + This syntax is _not recommended_ for the same reasons that make using {{jsxref("Global_Objects/eval", "eval()")}} a security risk. +- `delay` {{optional_inline}} + - : The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. Defaults to 0 if not specified. + See [Delay restrictions](#delay_restrictions) below for details on the permitted range of `delay` values. +- `arg1`, …, `argN` {{optional_inline}} + - : Additional arguments which are passed through to the function specified by _func_ once the timer expires. + +### Return value + +The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} to cancel the interval. + +It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout", "clearTimeout()")}} can technically be used interchangeably. +For clarity, however, you should try to always match them to avoid confusion when maintaining your code. + +> [!NOTE] +> The `delay` argument is converted to a signed 32-bit integer. +> This effectively limits `delay` to 2147483647 ms, roughly 24.8 days, since it's specified as a signed integer in the IDL. + +## Examples + +See {{domxref("Window.setInterval", "setInterval()")}} for examples. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("setTimeout()")}} +- {{domxref("Window.clearInterval()")}} and {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} and {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/en-us/web/http/headers/content-security-policy/script-src/index.md b/files/en-us/web/http/headers/content-security-policy/script-src/index.md index 9a4d1675dba9d91..b9bc82709d8fced 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src/index.md @@ -221,8 +221,8 @@ If a page has a CSP header and `'unsafe-eval'` isn't specified with the `script- - When passing a string literal like to methods like: `setTimeout("alert(\"Hello World!\");", 500);` - {{domxref("setTimeout()")}} - - {{domxref("setInterval()")}} - - {{domxref("window.setImmediate")}} + - {{domxref("Window.setInterval", "setInterval()")}} + - {{domxref("Window.setImmediate", "setImmediate()")}} - `window.execScript()` {{non-standard_inline}} (IE < 11 only) diff --git a/files/en-us/web/javascript/javascript_technologies_overview/index.md b/files/en-us/web/javascript/javascript_technologies_overview/index.md index 02e53d65a6169c0..a191e523cc1bf4c 100644 --- a/files/en-us/web/javascript/javascript_technologies_overview/index.md +++ b/files/en-us/web/javascript/javascript_technologies_overview/index.md @@ -67,7 +67,7 @@ The [WebIDL specification](https://webidl.spec.whatwg.org/) provides the glue be The Document Object Model (DOM) is a cross-platform, **language-independent convention** for representing and interacting with objects in HTML, XHTML and XML documents. Objects in the **DOM tree** may be addressed and manipulated by using methods on the objects. The [W3C](/en-US/docs/Glossary/W3C) standardizes the Core Document Object Model, which defines language-agnostic interfaces that abstract HTML and XML documents as objects, and also defines mechanisms to manipulate this abstraction. Among the things defined by the DOM, we can find: -- The document structure, a tree model, and the DOM Event architecture in [DOM core](https://dom.spec.whatwg.org/): [`Node`](/en-US/docs/Web/API/Node), [`Element`](/en-US/docs/Web/API/Element), [`DocumentFragment`](/en-US/docs/Web/API/DocumentFragment), [`Document`](/en-US/docs/Web/API/Document), [`DOMImplementation`](/en-US/docs/Web/API/DOMImplementation), [`Event`](/en-US/docs/Web/API/Event), [`EventTarget`](/en-US/docs/Web/API/EventTarget), … +- The document structure, a tree model, and the DOM Event architecture in [DOM core](https://dom.spec.whatwg.org/): {{domxref("Node")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}, {{domxref("Document")}}, {{domxref("DOMImplementation")}}, {{domxref("Event")}}, {{domxref("EventTarget")}}, … - A less rigorous definition of the DOM Event Architecture, as well as specific events in [DOM events](https://w3c.github.io/uievents/). - Other things such as [DOM Traversal](https://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html) and [DOM Range](https://dom.spec.whatwg.org/#ranges). @@ -75,15 +75,15 @@ From the ECMAScript point of view, objects defined in the DOM specification are ### HTML DOM -[HTML](https://html.spec.whatwg.org/multipage/), the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the _meaning_ of elements. The HTML DOM includes such things as the `className` property on HTML elements, or APIs such as [`document.body`](/en-US/docs/Web/API/Document/body). +[HTML](https://html.spec.whatwg.org/multipage/), the Web's markup language, is specified in terms of the DOM. Layered above the abstract concepts defined in DOM Core, HTML also defines the _meaning_ of elements. The HTML DOM includes such things as the `className` property on HTML elements, or APIs such as {{domxref("Document.body")}}. -The HTML specification also defines restrictions on documents; for example, it requires all children of a [`
    `](/en-US/docs/Web/HTML/Element/ul) element, which represents an unordered list, to be [`
  • `](/en-US/docs/Web/HTML/Element/li) elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard. +The HTML specification also defines restrictions on documents; for example, it requires all children of a {{htmlelement("ul")}} element, which represents an unordered list, to be {{htmlelement("li")}} elements, as those represent list items. In general, it also forbids using elements and attributes that aren't defined in a standard. -Looking for the [`Document`](/en-US/docs/Web/API/Document) object, [`Window`](/en-US/docs/Web/API/Window) object, and the other DOM elements? Read the [DOM documentation](/en-US/docs/Web/API/Document_Object_Model). +Looking for the {{domxref("Document")}} object, {{domxref("Window")}} object, and the other DOM elements? Read the [DOM documentation](/en-US/docs/Web/API/Document_Object_Model). ## Other notable APIs -- The [`setTimeout`](/en-US/docs/Web/API/setTimeout) and [`setInterval`](/en-US/docs/Web/API/setInterval) functions were first specified on the [`Window`](/en-US/docs/Web/API/Window) interface in HTML Standard. +- The [`setTimeout`](/en-US/docs/Web/API/setTimeout) and {{domxref("Window.setInterval", "setInterval()")}} functions were first specified on the {{domxref("Window")}} interface in HTML Standard. - [XMLHttpRequest](https://xhr.spec.whatwg.org/) makes it possible to send asynchronous HTTP requests. - The [Fetch API](https://fetch.spec.whatwg.org/) provides a more ergonomic abstraction for network requests. - The [CSS Object Model](https://drafts.csswg.org/cssom/) abstract CSS rules as objects. @@ -92,7 +92,7 @@ Looking for the [`Document`](/en-US/docs/Web/API/Document) object, [`Window`](/e - [Canvas 2D Context](https://html.spec.whatwg.org/multipage//#2dcontext) is a drawing API for [``](/en-US/docs/Web/HTML/Element/canvas). - The [WebAssembly interface](https://webassembly.github.io/spec/js-api/) provides utilities for communication between JavaScript code and [WebAssembly](/en-US/docs/WebAssembly) modules. -Non-browser environments (like Node.js) often do not have DOM APIs — because they don't interact with a document — but they still usually implement many web APIs, such as [`fetch()`](/en-US/docs/Web/API/Window/fetch) and [`setTimeout()`](/en-US/docs/Web/API/setTimeout). +Non-browser environments (like Node.js) often do not have DOM APIs — because they don't interact with a document — but they still usually implement many web APIs, such as {{domxref("Window.fetch", "fetch()")}} and [`setTimeout()`](/en-US/docs/Web/API/setTimeout). ## JavaScript implementations diff --git a/files/en-us/web/media/autoplay_guide/index.md b/files/en-us/web/media/autoplay_guide/index.md index bc3dd59655989da..283d3df6fd4f52d 100644 --- a/files/en-us/web/media/autoplay_guide/index.md +++ b/files/en-us/web/media/autoplay_guide/index.md @@ -205,7 +205,7 @@ We then add a {{jsxref("Promise.catch", "catch()")}} handler to the promise. Thi Any other errors are handled as appropriate. -If you want to start playing the video after the first interaction with the page, [`setInterval()`](/en-US/docs/Web/API/setInterval) might be used to achieve this: +If you want to start playing the video after the first interaction with the page, {{domxref("Window.setInterval", "setInterval()")}} might be used to achieve this: ```js let playAttempt = setInterval(() => { @@ -226,7 +226,7 @@ In the [Web Audio API](/en-US/docs/Web/API/Web_Audio_API), a website or app can ## The autoplay Permissions Policy -In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The {{Glossary("HTTP")}} {{HTTPHeader("Permissions-Policy")}} header's [`autoplay`](/en-US/docs/Web/HTTP/Headers/Permissions-Policy/autoplay) directive is used to control which domains, if any, can be used to autoplay media. By default, the `autoplay` Permissions Policy is set to `self`, indicating that autoplay is permitted as they're hosted on the same domain as the document. +In addition to the browser-side management and control over autoplay functionality described above, a web server can also express its willingness to allow autoplay to function. The {{Glossary("HTTP")}} {{HTTPHeader("Permissions-Policy")}} header's {{httpheader("Permissions-Policy/autoplay", "autoplay")}} directive is used to control which domains, if any, can be used to autoplay media. By default, the `autoplay` Permissions Policy is set to `self`, indicating that autoplay is permitted as they're hosted on the same domain as the document. You can also specify an empty allowlist (`()`) to disable autoplay entirely, `*` to allow autoplay from all domains, or one or more specific origins from which media can be automatically played. These origins are separated by space characters. diff --git a/files/en-us/web/performance/css_javascript_animation_performance/index.md b/files/en-us/web/performance/css_javascript_animation_performance/index.md index 63411a3480ed276..80473bd22feca4e 100644 --- a/files/en-us/web/performance/css_javascript_animation_performance/index.md +++ b/files/en-us/web/performance/css_javascript_animation_performance/index.md @@ -19,7 +19,7 @@ In terms of performance, there is no difference between implementing an animatio ## requestAnimationFrame -The {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} API provides an efficient way to make animations in JavaScript. The callback function of the method is called by the browser before the next repaint on each frame. Compared to {{domxref("setTimeout()")}}/{{domxref("setInterval()")}}, which need a specific delay parameter, `requestAnimationFrame()` is much more efficient. Developers can create an animation by changing an element's style each time the loop is called (or updating the Canvas draw, or whatever.) +The {{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} API provides an efficient way to make animations in JavaScript. The callback function of the method is called by the browser before the next repaint on each frame. Compared to {{domxref("setTimeout()")}}/{{domxref("Window.setInterval", "setInterval()")}}, which need a specific delay parameter, `requestAnimationFrame()` is much more efficient. Developers can create an animation by changing an element's style each time the loop is called (or updating the Canvas draw, or whatever.) > [!NOTE] > Like CSS transitions and animations, `requestAnimationFrame()` pauses when the current tab is pushed into the background. diff --git a/files/en-us/web/performance/fundamentals/index.md b/files/en-us/web/performance/fundamentals/index.md index adbe23e571d268e..8128b5f4394e7da 100644 --- a/files/en-us/web/performance/fundamentals/index.md +++ b/files/en-us/web/performance/fundamentals/index.md @@ -152,9 +152,9 @@ In addition, transforms give you capabilities you might not otherwise have. Not #### Use `requestAnimationFrame()` instead of `setInterval()` -Calls to {{domxref("setInterval()")}} run code at a presumed frame rate that may or may not be possible under current circumstances. It tells the browser to render results even while the browser isn't actually drawing; that is, while the video hardware hasn't reached the next display cycle. This wastes processor time and can even lead to reduced battery life on the user's device. +Calls to {{domxref("Window.setInterval", "setInterval()")}} run code at a presumed frame rate that may or may not be possible under current circumstances. It tells the browser to render results even while the browser isn't actually drawing; that is, while the video hardware hasn't reached the next display cycle. This wastes processor time and can even lead to reduced battery life on the user's device. -Instead, you should try to use {{domxref("window.requestAnimationFrame()")}}. This waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. Another benefit to this API is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). This will save battery life and prevent users from cursing your name into the night sky. +Instead, you should try to use {{domxref("Window.requestAnimationFrame()")}}. This waits until the browser is actually ready to start building the next frame of your animation, and won't bother if the hardware isn't going to actually draw anything. Another benefit to this API is that animations won't run while your app isn't visible on the screen (such as if it's in the background and some other task is operating). This will save battery life and prevent users from cursing your name into the night sky. #### Make events immediate