{"id":23639,"date":"2022-11-27T13:19:03","date_gmt":"2022-11-27T07:49:03","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/"},"modified":"2022-11-27T13:19:03","modified_gmt":"2022-11-27T07:49:03","slug":"solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/","title":{"rendered":"[Solved] Count to numbers above a billion in a few seconds without browser freezing"},"content":{"rendered":"

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

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

The best thing you can do is use requestAnimationFrame<\/a>. This represents the fastest rate that you can update the DOM.<\/p>\n

Use the callback to update your element text to the number proportional to the time allowed; 3 seconds (a few<\/em>) from your question title<\/p>\n<\/p>\n

\n
\n
const runCounter = (num, timeout, el) => {\n  let start;\n\n  const step = (ts) => {\n    if (!start) {\n      start = ts; \/\/ record the first iteration timestamp\n    }\n\n    const progress = (ts - start) \/ timeout; \/\/ how far into the time span\n\n    if (progress < 1) {\n      el.textContent = Math.floor(num * progress);\n      requestAnimationFrame(step); \/\/ request the next frame\n    } else {\n      el.textContent = num; \/\/ finish\n    }\n  };\n\n  requestAnimationFrame(step);\n};\n\nrunCounter(6_000_000_000, 3000, document.getElementById(\"blahblahblah\"));<\/code><\/pre>\n
<output id=\"blahblahblah\">0<\/output><\/code><\/pre>\n<\/div>\n<\/div><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Count to numbers above a billion in a few seconds without browser freezing <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] The best thing you can do is use requestAnimationFrame. This represents the fastest rate that you can update the DOM. Use the callback to update your element text to the number proportional to the time allowed; 3 seconds (a few) from your question title const runCounter = (num, timeout, el) => { let start; … 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":[346,333],"class_list":["post-23639","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript"],"yoast_head":"\n[Solved] Count to numbers above a billion in a few seconds without browser freezing - 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-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Count to numbers above a billion in a few seconds without browser freezing - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] The best thing you can do is use requestAnimationFrame. This represents the fastest rate that you can update the DOM. Use the callback to update your element text to the number proportional to the time allowed; 3 seconds (a few) from your question title const runCounter = (num, timeout, el) => { let start; ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-27T07:49:03+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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Count to numbers above a billion in a few seconds without browser freezing\",\"datePublished\":\"2022-11-27T07:49:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\"},\"wordCount\":73,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\",\"name\":\"[Solved] Count to numbers above a billion in a few seconds without browser freezing - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-11-27T07:49:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Count to numbers above a billion in a few seconds without browser freezing\"}]},{\"@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=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Count to numbers above a billion in a few seconds without browser freezing - 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-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Count to numbers above a billion in a few seconds without browser freezing - JassWeb","og_description":"[ad_1] The best thing you can do is use requestAnimationFrame. This represents the fastest rate that you can update the DOM. Use the callback to update your element text to the number proportional to the time allowed; 3 seconds (a few) from your question title const runCounter = (num, timeout, el) => { let start; ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/","og_site_name":"JassWeb","article_published_time":"2022-11-27T07:49:03+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Count to numbers above a billion in a few seconds without browser freezing","datePublished":"2022-11-27T07:49:03+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/"},"wordCount":73,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/","url":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/","name":"[Solved] Count to numbers above a billion in a few seconds without browser freezing - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-27T07:49:03+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-count-to-numbers-above-a-billion-in-a-few-seconds-without-browser-freezing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Count to numbers above a billion in a few seconds without browser freezing"}]},{"@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=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","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\/23639","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=23639"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/23639\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=23639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=23639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=23639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}