{"id":19799,"date":"2020-10-26T21:42:35","date_gmt":"2020-10-27T04:42:35","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19799"},"modified":"2023-12-01T04:03:26","modified_gmt":"2023-12-01T12:03:26","slug":"javascript-settimeout-setinterval","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/","title":{"rendered":"JavaScript setTimeout and setInterval: A Guide"},"content":{"rendered":"\n<p><em>setTimeout() and setInterval() are JavaScript timing events. The JavaScript setTimeout() method executes a function after a period of milliseconds. JavaScript setInterval() executes a function continuously after a certain period of milliseconds have passed.<\/em><\/p>\n\n\n\n<p>JavaScript runs line-by-line. As soon as one line has executed, the next line begins. For most websites, this structure makes sense: you need your code to execute in an order. What if you want to introduce a break between operations?<\/p>\n\n\n\n<p>That\u2019s where the setTimeout and setInterval methods come in handy. <em>setTimeout<\/em> calls a function after a specified delay. <em>setInterval<\/em> calls a function continuously at a specified delay.<\/p>\n\n\n\n<p>In this guide, we\u2019re going to talk about what <em>setTimeout<\/em> and <em>setInterval<\/em> are. We\u2019ll show how they work by referring to a few examples so you can get started using these methods. Let\u2019s begin!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is JavaScript setTimeout?<\/h2>\n\n\n\n<p>JavaScript setTimeout() calls a method after a certain period of milliseconds have passed. The method is only called once. The setTimeout() method lets you introduce delays into your code.<\/p>\n\n\n\n<p>Let&#8217;s take a look at the syntax for this method:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>window.setTimeout(function, time);<\/pre><\/div>\n\n\n\n<p>The two parameters accepted by setTimeout are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>function<\/strong>: The function you want to execute after a period of time has passed.<\/li><li><strong>time<\/strong>: The amount of time your program should wait before executing a function.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Start a setTimeout JavaScript Timer<\/h3>\n\n\n\n<p>Let\u2019s create a timer which prints \u201cCareer Karma!\u201d to the console using an <a href=\"https:\/\/careerkarma.com\/blog\/javascript-arrow-function\/\">arrow function<\/a>:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>setTimeout(() =&gt; {\n\tconsole.log(&quot;Career Karma!&quot;);\n}, 2000);<\/pre><\/div>\n\n\n\n<p>This timer has two arguments. The first argument is the JavaScript function that we want to execute inside our window object. The second argument is the period of time in milliseconds that we want to elapse before the code inside our function should execute.&nbsp;<\/p>\n\n\n\n<p>After waiting two seconds, our code prints &#8220;Career Karma!&#8221; to the <a href=\"https:\/\/careerkarma.com\/blog\/javascript-console\/\">JavaScript console<\/a>.<\/p>\n\n\n\n<p>The function you want to call does not need to be defined within the <em>setTimeout<\/em> function. We can refactor our code to make it easier to read:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function printCareerKarma() {\n\tconsole.log(&quot;Career Karma!&quot;);\n}\n\nsetTimeout(printCareerKarma, 2000);<\/pre><\/div>\n\n\n\n<p>The function that was previously an argument is now in its own <a href=\"https:\/\/careerkarma.com\/blog\/how-to-use-javascript-functions\/\">function<\/a> called <em>printCareerKarma<\/em>. We reference that function inside the <em>setTimeout<\/em> method. This code is easier to read than our original example.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Cancel a setTimeout Timer<\/h3>\n\n\n\n<p>You can cancel a timer using the <em>clearTimeout()<\/em> method. This will stop a timer from running and the code inside a timer will not be executed. Consider the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>function printCareerKarma() {\n\tconsole.log(&quot;Career Karma!&quot;);\n}\n\nvar setTimer = setTimeout(printCareerKarma, 2000);\n\nsetTimeout(() =&gt; {\nclearTimeout(setTimer);\n}, 100);<\/pre><\/div>\n\n\n\n<p>This code will not print \u201cCareer Karma!\u201d to the console. This is because we cancel our timer using <em>clearTimeout<\/em> before the <em>setTimer<\/em> timer has the chance to execute.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is JavaScript setInterval?<\/h2>\n\n\n\n<p>The JavaScript setInterval() method calls a function repeatedly. A specified delay is set between each time a function is called.<\/p>\n\n\n\n<p>setInterval() uses a similar syntax to setTimeout():<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>window.setInterval(function, time);<\/pre><\/div>\n\n\n\n<p>You must specify two parameters to use setInterval:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>function: The function that will be executed.<\/li><li>time: The time between each call of the function you have specified.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Start a setInterval JavaScript Timer<\/h3>\n\n\n\n<p>Whereas <em>setTimeout<\/em> only executes a function once, <em>setInterval<\/em> will keep executing a function over again. It uses the same syntax as the <em>setTimeout<\/em> method.\n\n<\/p>\n\n\n\n<p>Let\u2019s create a function which prints out the contents of an <a href=\"https:\/\/careerkarma.com\/blog\/javascript-array\/\">array<\/a> of coffees to the console:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>let i = 0;\nlet coffees = [&quot;Cortado&quot;, &quot;Macchiato&quot;, &quot;Mocha&quot;, &quot;Latte&quot;];\n\nfunction iterateOverArray() {\n\tconsole.log(coffees[i]);\n\ti++;\n}\n\nsetInterval(iterateOverArray, 1000);<\/pre><\/div>\n\n\n\n<p>This code execute sthe <em>iterateOverArray<\/em> function repeatedly. There is a one second (1000 millisecond) delay between each call of this function.<\/p>\n\n\n\n<p>Let\u2019s run our code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>Cortado\nMacchiato\nMocha\nLatte\nundefined\nundefined\n...<\/pre><\/div>\n\n\n\n<p>The trouble with this code is that it keeps going even after it has iterated over every item in our list. When all items in our list have been printed to the console, \u201cundefined\u201d values are printed indefinitely.<\/p>\n\n\n\n<p>The <em>setInterval<\/em> function will keep executing because it repeats until it has been instructed to stop. Let\u2019s fix this problem.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Cancel a setInterval Timer<\/h3>\n\n\n\n<p>The <em>clearInterval<\/em> method stops a <em>setInterval<\/em> method from executing further.<\/p>\n\n\n\n<p>Let\u2019s cancel our timer once all the coffees on the menu are printed to the console.  To start, we&#8217;ll calculate how many items are in our coffees list. This will allow us to identify when we should cancel our timer.<\/p>\n\n\n\n<p>Next, we\u2019ll add a function to the end of our code. This function stops our <em>setInterval<\/em> method after all our coffees have been printed to the console:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>let numberOfCoffees = coffees.length;<\/pre><\/div>\n\n\n\n<p>Next, we\u2019ll add a function to the end of our code. This function stops our <em>setInterval<\/em> method after all our coffees have been printed to the console:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>let i = 0;\nlet coffees = [&quot;Cortado&quot;, &quot;Macchiato&quot;, &quot;Mocha&quot;, &quot;Latte&quot;];\nlet numberOfCoffees = coffees.length +1;\n\nfunction iterateOverArray() {\n\tconsole.log(coffees[i]);\n\ti++;\n}\n\nvar printCoffees = setInterval(iterateOverArray, 1000);\n\nsetTimeout(() =&gt; {\n\tclearInterval(printCoffees);\n}, numberOfCoffees * 1001);<\/pre><\/div>\n\n\n\n<p>We have assigned our <em>setInterval()<\/em> method to its own variable called printCoffees. We have then declared a <em>setTimeout()<\/em> method which cancels the printCoffees time interval. This method will execute after every coffee in our list has been iterated over.\n\n<\/p>\n\n\n\n<p>We calculate how many seconds the <em>setTimeout()<\/em> method should wait by multiplying the number of coffees to print out by 1001. Four coffees are stored in our list. Four multiplied by 1000 is 4000, which is four seconds.\n\n<\/p>\n\n\n\n<p>We have chosen the number 1001 so that our timer stops after the last array item has been printed to the console. If we chose the number 4000, our printCoffees method would halt before it printed the last item in our \u201ccoffees\u201d array to the console.<\/p>\n\n\n\n<p>Let\u2019s run our code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>Cortado\nMacchiato\nMocha\nLatte<\/pre><\/div>\n\n\n\n<p>Our code stops after all the items in our list have been printed to the console. It no longer continues to execute indefinitely. This is because we have used the <em>clearInterval()<\/em> method to stop the <em>setInterval()<\/em> method.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">setInterval: A Visual Example<\/h2>\n\n\n\n<p>Let\u2019s use some HTML to show off how the <em>setInterval<\/em> function works. We\u2019re going to create a simple website which shows our list of coffees. These coffees will be added one-by-one to the site. We\u2019ll begin by creating a simple front-end for the project in a file called index.html:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n\t&lt;head&gt;\n\t\t&lt;title&gt;Coffee List&lt;\/title&gt;\n\t&lt;\/head&gt;\n\t&lt;body&gt;\n\t\t&lt;h1&gt;Coffee List&lt;\/h1&gt;\n\t\t&lt;ul id=&quot;coffees&quot;&gt;\n\t\t&lt;\/ul&gt;\n\t&lt;\/body&gt;\n\t&lt;script src=&quot;scripts.js&quot;&gt;&lt;\/script&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Our interface looks like this:<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/6okXMdjRqVaKAyir5bEYOj8C94vmv_nLTTYy4tw3-jlK-O2H3r-qXrM_blze886bBFFOzVth2mVnmq9E9IKo-AmRYMoPdoGhToy4K0rFANOFnqAHmeyn74JellbuBam1m910vvtc\" alt=\"\"\/><\/figure>\n\n\n\n<p>So far, there is not much going on. That\u2019s because we need to write some JavaScript to make our coffees appear on the web page.\n\n<\/p>\n\n\n\n<p>We\u2019ll start our JavaScript by selecting our list. Open up a file called scripts.js and paste in this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var ul = document.getElementById(&quot;coffees&quot;);<\/pre><\/div>\n\n\n\n<p>This code selects our list element. You can learn more about <em>getElementById<\/em> in our tutorial on <a href=\"https:\/\/careerkarma.com\/blog\/javascript-getelementbyidv\/\">JavaScript getElementById<\/a>. Then, we\u2019ll use our code from earlier, with a few changes, to display the coffees on the web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>var ul = document.getElementById(&quot;coffees&quot;);\n\nlet i = 0;\nlet coffees = [&quot;Cortado&quot;, &quot;Macchiato&quot;, &quot;Mocha&quot;, &quot;Latte&quot;];\nlet numberOfCoffees = coffees.length +1;\n\nfunction iterateOverArray() {\n\tvar li = document.createElement(&quot;li&quot;);\n\tli.innerText = coffees[i];\n\tul.appendChild(li);\n\ti++;\n}\n\nvar printCoffees = setInterval(iterateOverArray, 1000);\n\nsetTimeout(() =&gt; {\n\tclearInterval(printCoffees);\n}, numberOfCoffees * 1001);<\/pre><\/div>\n\n\n\n<p>In the <em>iterateOverArray<\/em> function, we have added in some new code. We have first used <em>createElement()<\/em> to create a new <em>li<\/em> element. We have then set the contents of that <em>li<\/em> element to be equal to the name of a coffee in our list.\n\n<\/p>\n\n\n\n<p>Our code adds the <em>li<\/em> element to the <em>ul<\/em> element in our list. This process repeats until every item in our coffees list has been added to the web page, like in our last example. <\/p>\n\n\n\n<p>Let\u2019s run our code and see what happens. After four seconds, our code returns:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/bKdNM1booSj51VOG3Edr4fT1Z53SrHX6tT7RcsPA7tSJ5bGi1IPvOqHEDNNThuDhexK3vOSZ9-jdXWlcfQ0WXyaX2y4lCBr957jjAEkenvoWF27UEWPNpgpExDnX6PwV0wvAO-5u\" alt=\"\"\/><\/figure>\n\n\n\n<p>There is a one second gap between each item in the list being added to the web page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion (and Challenge)<\/h2>\n\n\n\n<p><em>setTimeout<\/em> and <em>setInterval<\/em> are JavaScript timing events. The <em>setTimeout<\/em> method executes a function after a delay. <em>setInterval<\/em> calls a function repeatedly with a delay between each call.<\/p>\n\n\n\n<p>Are you looking to level up your skills with these methods? Try to create a visual interface using HTML and JavaScript for a memory game.<\/p>\n\n\n\n<p>The game should show a series of five words for a user to remember. After the words have been displayed, the user should be asked which ones they remember.&nbsp;If you are looking for more help learning JavaScript, read our guide on the <a href=\"https:\/\/careerkarma.com\/blog\/tutorial-for-javascript-beginners\/\">best tutorials for JavaScript beginners<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"setTimeout() and setInterval() are JavaScript timing events. The JavaScript setTimeout() method executes a function after a period of milliseconds. JavaScript setInterval() executes a function continuously after a certain period of milliseconds have passed. JavaScript runs line-by-line. As soon as one line has executed, the next line begins. For most websites, this structure makes sense: you&hellip;","protected":false},"author":240,"featured_media":19800,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-19799","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript setTimeout and setInterval: A Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript setTimeout and setInterval: A Guide\" \/>\n<meta property=\"og:description\" content=\"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-27T04:42:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T12:03:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"JavaScript setTimeout and setInterval: A Guide\",\"datePublished\":\"2020-10-27T04:42:35+00:00\",\"dateModified\":\"2023-12-01T12:03:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/\"},\"wordCount\":1251,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/\",\"name\":\"JavaScript setTimeout and setInterval: A Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg\",\"datePublished\":\"2020-10-27T04:42:35+00:00\",\"dateModified\":\"2023-12-01T12:03:26+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-settimeout-setinterval\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript setTimeout and setInterval: A Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript setTimeout and setInterval: A Guide | Career Karma","description":"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript setTimeout and setInterval: A Guide","og_description":"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.","og_url":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-27T04:42:35+00:00","article_modified_time":"2023-12-01T12:03:26+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"JavaScript setTimeout and setInterval: A Guide","datePublished":"2020-10-27T04:42:35+00:00","dateModified":"2023-12-01T12:03:26+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/"},"wordCount":1251,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/","url":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/","name":"JavaScript setTimeout and setInterval: A Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg","datePublished":"2020-10-27T04:42:35+00:00","dateModified":"2023-12-01T12:03:26+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"setTimeout and setInterval are used to call functions after a period of time. On Career Karma, learn how to use JavaScript\u2019s setTimeout and setInterval methods.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/moritz-kindler-mGFHA_0TWnA-unsplash.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-settimeout-setinterval\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript setTimeout and setInterval: A Guide"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19799"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19800"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}