{"id":693,"date":"2024-01-19T19:00:00","date_gmt":"2024-01-19T19:00:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=693"},"modified":"2024-02-05T10:41:04","modified_gmt":"2024-02-05T10:41:04","slug":"settimeout-setinterval-in-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/settimeout-setinterval-in-javascript\/","title":{"rendered":"setTimeout(), setInterval() in JavaScript"},"content":{"rendered":"\n<p>In JavaScript, <code>setTimeout()<\/code> and <code>setInterval()<\/code> are functions used to execute code after a specified delay or at regular intervals, respectively. They are part of the browser&#8217;s Web APIs and are commonly used for implementing asynchronous behavior and scheduling tasks. Here&#8217;s how they work:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><code>setTimeout()<\/code> Function:<\/h3>\n\n\n\n<p>The <code>setTimeout()<\/code> function is used to execute a piece of code (a function or an expression) after a specified delay, measured in milliseconds.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>setTimeout(() =&gt; {\n  console.log('Delayed code executed after 2000 milliseconds');\n}, 2000);<\/code><\/pre>\n\n\n\n<p>In the above example, the code inside the arrow function will be executed after a delay of 2000 milliseconds (2 seconds).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><code>setInterval()<\/code> Function:<\/h3>\n\n\n\n<p>The <code>setInterval()<\/code> function is used to repeatedly execute a piece of code (a function or an expression) at specified intervals, measured in milliseconds.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let intervalId = setInterval(() =&gt; {\n  console.log('Repeated code executed every 1000 milliseconds');\n}, 1000);<\/code><\/pre>\n\n\n\n<p>In the above example, the code inside the arrow function will be executed repeatedly every 1000 milliseconds (1 second). The <code>setInterval()<\/code> function returns an interval ID that can be used to cancel the interval later using the <code>clearInterval()<\/code> function.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cancelling a Timeout or Interval:<\/h3>\n\n\n\n<p>You can cancel a timeout or interval using the <code>clearTimeout()<\/code> and <code>clearInterval()<\/code> functions, respectively. These functions take the timeout ID or interval ID returned by <code>setTimeout()<\/code> or <code>setInterval()<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let timeoutId = setTimeout(() =&gt; {\n  console.log('This code will never be executed');\n}, 2000);\n\n\/\/ Cancel the timeout\nclearTimeout(timeoutId);\n\nlet intervalId = setInterval(() =&gt; {\n  console.log('This code will never be executed repeatedly');\n}, 1000);\n\n\/\/ Cancel the interval\nclearInterval(intervalId);<\/code><\/pre>\n\n\n\n<p><code>setTimeout()<\/code> and <code>setInterval()<\/code> are powerful tools for implementing asynchronous behavior and scheduling tasks in JavaScript, but they should be used judiciously and with consideration for performance and efficiency.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, setTimeout() and setInterval() are functions used to execute code after a specified delay or at regular intervals, respectively.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-693","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/693\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}