{"id":3972,"date":"2022-08-21T00:38:36","date_gmt":"2022-08-20T19:08:36","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/"},"modified":"2022-08-21T00:38:36","modified_gmt":"2022-08-20T19:08:36","slug":"solved-ajax-too-slow-recursion","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/","title":{"rendered":"[Solved] Ajax too slow – Recursion"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

You are<\/strong> recursing and you shouldn’t be using this form of nested setInterval<\/code>. Doing this, will cause an explosion of interval instances. Instead of using setInterval<\/code>, schedule additional requests using setTimeout<\/code>.<\/p>\n

setInterval<\/code><\/a> will fire and continue firing every interval until you tell it to stop.<\/p>\n

setTimeout<\/code><\/a> will fire once.<\/p>\n

\n

Let’s consider the following code which should address some of the issues you are having in this question as well as your other 2 questions.<\/p>\n

First off, as we said before, don’t use setInterval<\/code> unless you actually want it to run forever. Additionally, don’t nest<\/strong> the setInterval<\/code> creations unless you actually mean to.<\/p>\n

Instead, let’s create a recursive function getTimeLeft()<\/code> that will handle firing the request and scheduling the next check for time left after some duration.<\/p>\n

This example also mocks the $.ajax()<\/code> function so that you can see the function in action since we don’t have an actual back end to use.<\/p>\n<\/p>\n

\n
\n
\/\/ Fake server side data to keep track of time lefts\r\nconst timeLefts = {\r\n  foo: 0,\r\n  bar: 0,\r\n  fizz: 0,\r\n  buzz: 0\r\n};\r\nconst timeLeftsUpdateInterval = setInterval(() => {\r\n  for (const [key, val] of Object.entries(timeLefts)) {\r\n    timeLefts[key] = Math.min(val + Math.random() * 10, 100);\r\n  }\r\n  if (Object.entries(timeLefts).every(([k, v]) => v >= 100)) {\r\n    clearInterval(timeLeftsUpdateInterval);\r\n  }\r\n}, 1000);\r\n\r\n\/\/ Mock $.ajax function to stub sending AJAX requests\r\nfunction $ajax(kwargs) {\r\n  return {\r\n    done: cb => {\r\n      setTimeout(() => {\r\n        cb(timeLefts[kwargs.data.x]);\r\n      }, 500);\r\n    }\r\n  };\r\n}\r\n\r\n\/\/ We will check for an update every second after the last request finishes\r\nconst timeLeftCheckInterval = 1000;\r\n\r\n\/\/ Continuously check to see how much time is left for an element\r\nfunction getTimeLeft(el) {\r\n  \/\/ Make our request data\r\n  const dataString = {\r\n    s: \"<?echo $_SESSION['currentview_'.$stamp]?>\",\r\n    r: \"<?echo $search_usernumber?>\",\r\n    st: \"<?echo $stamp?>\",\r\n    \/\/ My custom property to make this work\r\n    x: el.dataset.item\r\n  };\r\n\r\n  \/\/ Make our request to get the time left\r\n  const req = $ajax({ \/\/ Using our mock $.ajax\r\n    type: \"POST\",\r\n    url: \"get_content_home.php\",\r\n    dataType: \"html\",\r\n    data: dataString\r\n  });\r\n\r\n  \/\/ Once the request has finished\r\n  req.done(data => {\r\n    \/\/ Set the time left to the element\r\n    el.innerHTML = data;\r\n\r\n    \/\/ Have some condition so that you don't check for time left forever\r\n    \/\/ Eventually there will be no time left right?  Why keep checking?\r\n    if (data.timeleft <= 0) return;\r\n\r\n    \/\/ Schedule another round of checking for time left after some duration\r\n    setTimeout(() => {\r\n      getTimeLeft(el);\r\n    }, timeLeftCheckInterval);\r\n  });\r\n}\r\n\r\n\/\/ Kick off getting timeleft for all .items\r\nArray.from(document.querySelectorAll(\".item\"))\r\n  .forEach(el => getTimeLeft(el));<\/code><\/pre>\n
<ul>\r\n  <li class=\"item\" data-item=\"foo\"><\/li>\r\n  <li class=\"item\" data-item=\"bar\"><\/li>\r\n  <li class=\"item\" data-item=\"fizz\"><\/li>\r\n  <li class=\"item\" data-item=\"buzz\"><\/li>\r\n<\/ul><\/code><\/pre>\n<\/div>\n<\/div>\n
This code will address the issue that you are having in 2 Ajax non-blocking because each element will have it’s own logic of going and fetching time left and updating itself.<\/p>\n
This also addresses the issue that you are potentially facing in Timer in Ajax – Preemption because now the element won’t check to see how much time is left again until after the previous check is finished.<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            0<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Ajax too slow – Recursion <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] You are recursing and you shouldn’t be using this form of nested setInterval. Doing this, will cause an explosion of interval instances. Instead of using setInterval, schedule additional requests using setTimeout. setInterval will fire and continue firing every interval until you tell it to stop. setTimeout will fire once. Let’s consider the following code … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[334,333,325,494],"class_list":["post-3972","post","type-post","status-publish","format-standard","hentry","category-solved","tag-ajax","tag-javascript","tag-performance","tag-recursion"],"yoast_head":"\n[Solved] Ajax too slow - Recursion - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Ajax too slow - Recursion - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You are recursing and you shouldn’t be using this form of nested setInterval. Doing this, will cause an explosion of interval instances. Instead of using setInterval, schedule additional requests using setTimeout. setInterval will fire and continue firing every interval until you tell it to stop. setTimeout will fire once. Let’s consider the following code ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-20T19:08:36+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Ajax too slow – Recursion\",\"datePublished\":\"2022-08-20T19:08:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\"},\"wordCount\":231,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"ajax\",\"javascript\",\"performance\",\"recursion\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\",\"name\":\"[Solved] Ajax too slow - Recursion - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-08-20T19:08:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Ajax too slow – Recursion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Ajax too slow - Recursion - JassWeb","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:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Ajax too slow - Recursion - JassWeb","og_description":"[ad_1] You are recursing and you shouldn’t be using this form of nested setInterval. Doing this, will cause an explosion of interval instances. Instead of using setInterval, schedule additional requests using setTimeout. setInterval will fire and continue firing every interval until you tell it to stop. setTimeout will fire once. Let’s consider the following code ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/","og_site_name":"JassWeb","article_published_time":"2022-08-20T19:08:36+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Ajax too slow – Recursion","datePublished":"2022-08-20T19:08:36+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/"},"wordCount":231,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["ajax","javascript","performance","recursion"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/","url":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/","name":"[Solved] Ajax too slow - Recursion - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-08-20T19:08:36+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-ajax-too-slow-recursion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Ajax too slow – Recursion"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/3972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=3972"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/3972\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=3972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=3972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=3972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}