Simulating Delay using jQuery and setTimeout()

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

强健的猕猴桃 · js和jq给select绑定onchange ...· 3 周前 ·

不开心的烤面包 · jQuery - 動畫 | 樂遊前端趣· 3 周前 ·

谦虚好学的硬盘 · jQuery 实例 | W3C教程· 3 周前 ·

深沉的黄瓜 · jquery实现点击空白处隐藏元素_jque ...· 3 周前 ·

酷酷的冲锋衣 · jquery实现点击显示与隐藏及点击其它区域 ...· 3 周前 ·

内向的树叶 · 北京市公安局公安交通管理局· 5 月前 ·

耍酷的爆米花 · 云计算面试题及答案(99%面试官必考必问) ...· 11 月前 ·

坚强的汤圆 · python 字符串 contains ...· 1 年前 ·

另类的冲锋衣 · ModuleNotFoundError: ...· 1 年前 ·

卖萌的皮蛋 · 别克微蓝7纯电动SUV和微蓝6插电式混动MA ...· 1 年前 ·

</noscript><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="sticky top-0 z-50 w-full"><nav class="header-module--nav--ec8cc relative h-10 bg-spBlack" aria-label="Main navigation"><div class="container relative flex items-center justify-between h-full mx-auto max-w-screen-xl"><a href="/" aria-label="SitePoint" class="flex items-center px-gs-1"><svg viewbox="0 0 123 27" class="header-module--logo--07b7e fill-current text-white"><title>SitePoint</title><g fill-rule="evenodd"><path d="M31.36,16.75 C31.56,17.07 31.82,17.31 32.14,17.50 C32.46,17.68 32.82,17.82 33.23,17.89 C33.63,17.97 34.05,18.01 34.48,18.01 C34.81,18.01 35.16,17.99 35.52,17.94 C35.89,17.89 36.22,17.81 36.53,17.68 C36.83,17.55 37.08,17.36 37.28,17.11 C37.48,16.87 37.58,16.55 37.58,16.17 C37.58,15.64 37.37,15.24 36.96,14.97 C36.55,14.69 36.03,14.47 35.41,14.31 C34.79,14.14 34.12,13.99 33.39,13.85 C32.66,13.71 31.99,13.52 31.37,13.27 C30.75,13.03 30.23,12.68 29.82,12.23 C29.41,11.78 29.20,11.16 29.20,10.36 C29.20,9.73 29.34,9.20 29.63,8.75 C29.92,8.30 30.30,7.94 30.75,7.66 C31.20,7.38 31.72,7.17 32.29,7.03 C32.86,6.90 33.42,6.83 33.99,6.83 C34.71,6.83 35.38,6.89 35.99,7.01 C36.61,7.13 37.15,7.34 37.62,7.63 C38.09,7.93 38.46,8.33 38.75,8.83 C39.03,9.34 39.19,9.96 39.24,10.72 L37.13,10.72 C37.10,10.32 36.99,9.98 36.81,9.72 C36.63,9.46 36.40,9.25 36.12,9.08 C35.84,8.92 35.53,8.81 35.19,8.74 C34.85,8.66 34.51,8.63 34.16,8.63 C33.84,8.63 33.53,8.65 33.20,8.70 C32.88,8.75 32.59,8.83 32.32,8.95 C32.06,9.07 31.84,9.23 31.68,9.43 C31.51,9.63 31.43,9.89 31.43,10.21 C31.43,10.56 31.56,10.86 31.82,11.09 C32.07,11.32 32.40,11.51 32.80,11.66 C33.19,11.82 33.64,11.95 34.13,12.05 C34.63,12.15 35.13,12.26 35.62,12.37 C36.15,12.49 36.67,12.62 37.17,12.78 C37.67,12.94 38.12,13.15 38.51,13.42 C38.90,13.68 39.21,14.01 39.45,14.41 C39.69,14.81 39.81,15.31 39.81,15.90 C39.81,16.66 39.65,17.28 39.33,17.77 C39.01,18.27 38.58,18.67 38.06,18.98 C37.54,19.28 36.96,19.49 36.30,19.61 C35.65,19.73 35.00,19.79 34.36,19.79 C33.65,19.79 32.97,19.72 32.32,19.58 C31.68,19.43 31.11,19.20 30.61,18.87 C30.12,18.54 29.72,18.11 29.42,17.57 C29.13,17.03 28.96,16.38 28.93,15.61 L31.03,15.61 C31.05,16.06 31.16,16.44 31.36,16.75" id="Fill-1"/><path d="M42.27,7.12 L44.37,7.12 L44.37,19.53 L42.27,19.53 L42.27,7.12 Z" id="Fill-2"/><path d="M53.13,7.12 L53.13,8.92 L50.57,8.92 L50.57,16.62 C50.57,16.86 50.59,17.05 50.63,17.20 C50.67,17.34 50.75,17.46 50.87,17.54 C50.99,17.62 51.15,17.67 51.35,17.69 C51.56,17.71 51.83,17.73 52.16,17.73 L53.13,17.73 L53.13,19.53 L51.51,19.53 C50.97,19.53 50.50,19.49 50.11,19.42 C49.72,19.35 49.41,19.22 49.17,19.02 C48.93,18.83 48.75,18.56 48.64,18.21 C48.52,17.86 48.46,17.39 48.46,16.81 L48.46,8.92 L46.28,8.92 L46.28,7.12 L48.46,7.12 L48.46,3.39 L50.57,3.39 L50.57,7.12 L53.13,7.12" id="Fill-3"/><path d="M64.53,18.73 C63.57,19.44 62.36,19.79 60.91,19.79 C59.89,19.79 59.00,19.63 58.25,19.31 C57.49,18.99 56.86,18.54 56.35,17.97 C55.84,17.39 55.45,16.70 55.20,15.90 C54.94,15.10 54.80,14.23 54.76,13.29 C54.76,12.34 54.91,11.48 55.21,10.69 C55.51,9.91 55.92,9.23 56.46,8.65 C57.00,8.08 57.63,7.63 58.37,7.31 C59.11,6.99 59.91,6.83 60.79,6.83 C61.93,6.83 62.87,7.05 63.63,7.51 C64.38,7.97 64.98,8.55 65.44,9.25 C65.89,9.96 66.20,10.73 66.38,11.56 C66.55,12.39 66.62,13.18 66.59,13.93 L56.99,13.93 C56.98,14.48 57.04,14.99 57.19,15.48 C57.34,15.97 57.58,16.40 57.91,16.78 C58.24,17.16 58.66,17.46 59.18,17.68 C59.69,17.90 60.29,18.01 60.98,18.01 C61.88,18.01 62.61,17.82 63.18,17.41 C63.75,17.02 64.13,16.41 64.31,15.59 L66.39,15.59 C66.11,16.98 65.49,18.03 64.53,18.73 L64.53,18.73 Z M64.02,10.76 C63.83,10.33 63.58,9.96 63.25,9.65 C62.93,9.34 62.55,9.09 62.11,8.90 C61.68,8.72 61.19,8.63 60.66,8.63 C60.12,8.63 59.62,8.72 59.19,8.90 C58.75,9.09 58.37,9.34 58.06,9.66 C57.75,9.98 57.50,10.35 57.32,10.78 C57.13,11.20 57.03,11.65 56.99,12.13 L64.36,12.13 C64.32,11.65 64.21,11.20 64.02,10.76 L64.02,10.76 Z" id="Fill-4"/><path d="M70.95,7.12 L70.95,8.80 L71.00,8.80 C71.35,8.11 71.89,7.61 72.64,7.30 C73.38,6.98 74.20,6.83 75.09,6.83 C76.09,6.83 76.95,7.00 77.68,7.36 C78.42,7.71 79.03,8.18 79.52,8.78 C80.01,9.38 80.37,10.08 80.62,10.86 C80.87,11.65 80.99,12.48 80.99,13.36 C80.99,14.24 80.87,15.07 80.63,15.85 C80.39,16.64 80.03,17.32 79.54,17.91 C79.06,18.49 78.44,18.95 77.71,19.29 C76.97,19.62 76.12,19.79 75.14,19.79 C74.83,19.79 74.48,19.76 74.09,19.70 C73.70,19.63 73.32,19.53 72.94,19.38 C72.56,19.24 72.20,19.04 71.86,18.79 C71.52,18.55 71.23,18.24 71.00,17.87 L70.95,17.87 L70.95,24.26 L68.84,24.26 L68.84,7.12 L70.95,7.12 L70.95,7.12 Z M78.53,11.52 C78.37,10.97 78.13,10.48 77.81,10.04 C77.49,9.61 77.07,9.27 76.57,9.01 C76.06,8.76 75.47,8.63 74.79,8.63 C74.08,8.63 73.48,8.76 72.98,9.04 C72.49,9.31 72.08,9.67 71.77,10.10 C71.46,10.55 71.23,11.05 71.09,11.60 C70.95,12.17 70.88,12.73 70.88,13.31 C70.88,13.92 70.95,14.51 71.10,15.07 C71.25,15.64 71.48,16.14 71.81,16.57 C72.13,17.01 72.55,17.35 73.06,17.62 C73.57,17.88 74.19,18.01 74.92,18.01 C75.65,18.01 76.25,17.88 76.74,17.61 C77.23,17.34 77.62,16.98 77.92,16.53 C78.22,16.08 78.43,15.57 78.56,14.99 C78.70,14.41 78.76,13.82 78.76,13.21 C78.76,12.64 78.68,12.07 78.53,11.52 L78.53,11.52 Z" id="Fill-5"/><path d="M83.17,10.78 C83.44,9.98 83.84,9.30 84.36,8.71 C84.89,8.13 85.55,7.67 86.33,7.33 C87.10,7.00 87.99,6.83 89.00,6.83 C90.03,6.83 90.92,7.00 91.69,7.33 C92.46,7.67 93.11,8.13 93.64,8.71 C94.17,9.30 94.56,9.98 94.83,10.78 C95.09,11.57 95.23,12.42 95.23,13.33 C95.23,14.25 95.09,15.09 94.83,15.88 C94.56,16.66 94.17,17.35 93.64,17.93 C93.11,18.52 92.46,18.97 91.69,19.30 C90.92,19.63 90.03,19.79 89.00,19.79 C87.99,19.79 87.10,19.63 86.33,19.30 C85.55,18.97 84.89,18.52 84.36,17.93 C83.84,17.35 83.44,16.66 83.17,15.88 C82.91,15.09 82.78,14.25 82.78,13.33 C82.78,12.42 82.91,11.57 83.17,10.78 L83.17,10.78 Z M85.32,15.34 C85.53,15.92 85.81,16.41 86.18,16.80 C86.54,17.19 86.96,17.49 87.45,17.70 C87.94,17.91 88.46,18.01 89.00,18.01 C89.55,18.01 90.06,17.91 90.55,17.70 C91.04,17.49 91.46,17.19 91.83,16.80 C92.19,16.41 92.48,15.92 92.68,15.34 C92.89,14.75 92.99,14.09 92.99,13.33 C92.99,12.58 92.89,11.91 92.68,11.33 C92.48,10.75 92.19,10.25 91.83,9.85 C91.46,9.45 91.04,9.15 90.55,8.94 C90.06,8.73 89.55,8.63 89.00,8.63 C88.46,8.63 87.94,8.73 87.45,8.94 C86.96,9.15 86.54,9.45 86.18,9.85 C85.81,10.25 85.53,10.75 85.32,11.33 C85.11,11.91 85.01,12.58 85.01,13.33 C85.01,14.09 85.11,14.75 85.32,15.34 L85.32,15.34 Z" id="Fill-6"/><path d="M97.83,7.12 L99.94,7.12 L99.94,19.53 L97.83,19.53 L97.83,7.12 Z" id="Fill-7"/><path d="M105.19,7.12 L105.19,9.08 L105.24,9.08 C106.12,7.58 107.51,6.83 109.41,6.83 C110.25,6.83 110.95,6.94 111.51,7.16 C112.08,7.39 112.53,7.70 112.88,8.10 C113.23,8.50 113.47,8.98 113.61,9.53 C113.75,10.08 113.82,10.69 113.82,11.36 L113.82,19.53 L111.71,19.53 L111.71,11.12 C111.71,10.36 111.48,9.75 111.02,9.30 C110.56,8.85 109.92,8.63 109.11,8.63 C108.46,8.63 107.91,8.72 107.43,8.92 C106.96,9.11 106.57,9.38 106.26,9.73 C105.94,10.08 105.71,10.50 105.55,10.97 C105.39,11.44 105.32,11.96 105.32,12.52 L105.32,19.53 L103.21,19.53 L103.21,7.12 L105.19,7.12" id="Fill-8"/><path d="M122.47,7.12 L122.47,8.92 L119.92,8.92 L119.92,16.62 C119.92,16.86 119.94,17.05 119.98,17.20 C120.02,17.34 120.10,17.46 120.22,17.54 C120.33,17.62 120.49,17.67 120.70,17.69 C120.91,17.71 121.18,17.73 121.50,17.73 L122.47,17.73 L122.47,19.53 L120.86,19.53 C120.32,19.53 119.85,19.49 119.46,19.42 C119.07,19.35 118.76,19.22 118.52,19.02 C118.28,18.83 118.10,18.56 117.99,18.21 C117.87,17.86 117.81,17.39 117.81,16.81 L117.81,8.92 L115.63,8.92 L115.63,7.12 L117.81,7.12 L117.81,3.39 L119.92,3.39 L119.92,7.12 L122.47,7.12" id="Fill-9"/><path d="M0.67,11.87 L2.62,13.76 L8.76,19.50 L11.41,16.94 C11.65,16.61 11.64,16.16 11.36,15.84 L8.94,13.72 L8.95,13.72 L6.34,11.19 C6.04,10.84 6.04,10.32 6.37,9.99 L13.38,3.21 L10.20,0.12 L0.68,9.31 C-0.05,10.02 -0.05,11.17 0.67,11.87" id="Fill-10"/><path d="M21.60,15.15 L19.66,13.27 L13.51,7.53 L10.86,10.08 C10.62,10.42 10.64,10.87 10.91,11.19 L13.33,13.31 L13.33,13.31 L15.93,15.84 C16.24,16.19 16.23,16.70 15.91,17.04 L8.89,23.82 L12.08,26.91 L19.65,19.60 L21.60,17.71 C22.33,17.01 22.33,15.86 21.60,15.15" id="Fill-11"/><path d="M44.55,4.58 C44.55,5.24 44.00,5.77 43.32,5.77 C42.64,5.77 42.09,5.24 42.09,4.58 C42.09,3.93 42.64,3.39 43.32,3.39 C44.00,3.39 44.55,3.93 44.55,4.58" id="Fill-12"/><path d="M100.11,4.58 C100.11,5.24 99.56,5.77 98.88,5.77 C98.20,5.77 97.65,5.24 97.65,4.58 C97.65,3.93 98.20,3.39 98.88,3.39 C99.56,3.39 100.11,3.93 100.11,4.58" id="Fill-13"/></g></svg></a><button class="header-module--toggler--2389f h-full px-gs-1 border-transparent bg-transparent lg:hidden" type="button" data-toggle="main-nav" aria-label="Toggle navigation" aria-controls="main-nav"><span aria-hidden="true" class="relative block w-10 rounded-lg bg-white"/></button><ul id="main-nav" class="header-module--navbarItems--065d7 absolute mb-0 left-0 flex grow flex-col justify-end w-full list-none transform origin-top-center transition translate-y-0 ease-in z-50 bg-gray-700 lg:bg-spBlack invisible scale-y-0 opacity-0 lg:static lg:flex lg:flex-row lg:h-full lg:w-auto lg:items-center lg:visible lg:opacity-100 lg:transform-none"><li><div class="mx-auto w-full lg:hidden"><div class="relative w-full lg:max-w-lg"><form class="undefined relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " type=" text" maxlength="100" placeholder="Search articles..." aria-label="Search articles" value=""/></form><div class="&#10; hidden"><div class="ais-Hits Hits searchBox-module--searchHits--c141f"><ul class="ais-Hits-list"/></div></div></div></div></li><li class="flex items-center py-1 lg:text-base lg:px-gs-1 lg:relative lg:h-full"><a href="/blog/" data-text="Blog" class="header-module--navLink--a00a5 inline-block px-3 relative w-full font-bold cursor-pointer text-white hover:text-primary-300 focus:text-gray-200 hover:bg-gray-500 hover:lg:bg-spBlack">Blog</a></li><li><ul class="mb-0 ml-3"><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a href="/premium/library/free/?ref_source=blog_nav" class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block">Free Tech Books →</a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/ai/">AI →</a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/javascript/">JavaScript </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/computing/">Computing </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/design-ux/">Design &amp; UX </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/html-css/">HTML &amp; CSS </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/entrepreneur/">Entrepreneur </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/web/">Web </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/php/">PHP </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/wordpress/">WordPress </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/mobile/">Mobile </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/programming/">Programming </a></li><li class="lg:hidden hover:bg-gray-500 cursor-pointer pl-3"><a class="grow-0 font-light text-gray-200 focus:text-primary-300 hover:text-primary-200 w-full inline-block" href="/python/">Python →</a></li></ul></li><li class="flex items-center py-1 lg:text-base lg:px-gs-1 lg:relative lg:h-full"><a href="/community/" data-text="Forum" class="header-module--navLink--a00a5 inline-block px-3 relative w-full font-bold cursor-pointer text-white hover:text-primary-300 focus:text-gray-200 hover:bg-gray-500 hover:lg:bg-spBlack">Forum</a></li><li class="flex items-center py-1 lg:text-base lg:px-gs-1 lg:relative lg:h-full"><a href="/premium/library/" data-text="Library" class="header-module--navLink--a00a5 inline-block px-3 relative w-full font-bold cursor-pointer text-white hover:text-primary-300 focus:text-gray-200 hover:bg-gray-500 hover:lg:bg-spBlack">Library</a></li><li class="flex items-center py-1 lg:text-base lg:px-gs-1 lg:relative lg:h-full"><a href="/premium/sign-in/" data-text="Login" class="header-module--navLink--a00a5 inline-block px-3 relative w-full font-bold cursor-pointer text-white hover:text-primary-300 focus:text-gray-200 hover:bg-gray-500 hover:lg:bg-spBlack">Login</a></li><li class="flex items-center lg:hidden"><a href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav" id="mobile-join-premium" name="Join Premium" class="text-white font-bold bg-primary-700 rounded-sm p-2 leading-tight hover:bg-primary-400 hover:text-white">Join Premium</a></li></ul><a id="join-premium" href="/premium/pricing/?ref_source=sitepoint&amp;ref_medium=topnav" class="hidden font-bold py-2 mx-4 btn btn-primary lg:block">Join Premium</a></div></nav></header><main id="main-content" layout="full-width" class="w-full flex-auto flex-shrink-0 mx-auto px-0 max-w-none py-0"><nav class="hidden border-b-2 lg:flex justify-center bg-white"><div class="flex lg:justify-between w-full max-w-screen-xl px-1"><div class="flex justify-center transform transition-transform duration-7000 ease invisible scale-x-0 w-0 m-0 hidden"><div class="relative w-full lg:max-w-lg"><form class="undefined relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " type=" text" maxlength="100" placeholder="Search articles..." aria-label="Search articles" value=""/></form><div class="&#10; hidden"><div class="ais-Hits Hits searchBox-module--searchHits--c141f"><ul class="ais-Hits-list"/></div></div></div><div class="right-8 px-3 pt-1"><button><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="xmark" class="svg-inline--fa fa-xmark fa-lg categoryNavigation-module--hoverIcon--8248f" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 384 512"><path fill="currentColor" d="M345 137c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-119 119L73 103c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l119 119L39 375c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l119-119L311 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-119-119L345 137z"/></svg></button></div></div><div class="flex overflow-x-hidden ml-0 relative opacity-100 -ml-2 w-full"><button class="categoryNavigation-module--hoverIcon--8248f absolute left-2 z-10 px-3"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="svg-inline--fa fa-chevron-left " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg></button><div class="relative overflow-hidden grow w-full mx-1"><ul id="carousel" class="categoryNavigation-module--ul--09a8f m-1 flex transition-all duration-3000 ease" style="transform:translateX(0px)"><li id="Free Tech Books" class="categoryNavigation-module--li--86367"><a href="/premium/library/free/?ref_source=blog_nav" class="categoryNavigation-module--li--86367 text-primary-700">Free Tech Books</a></li><li id="AI" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/ai/">AI</a></li><li id="JavaScript" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/javascript/">JavaScript</a></li><li id="Computing" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/computing/">Computing</a></li><li id="Design &amp; UX" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/design-ux/">Design &amp; UX</a></li><li id="HTML &amp; CSS" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/html-css/">HTML &amp; CSS</a></li><li id="Entrepreneur" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/entrepreneur/">Entrepreneur</a></li><li id="Web" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/web/">Web</a></li><li id="PHP" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/php/">PHP</a></li><li id="WordPress" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/wordpress/">WordPress</a></li><li id="Mobile" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/mobile/">Mobile</a></li><li id="Programming" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/programming/">Programming</a></li><li id="Python" class="categoryNavigation-module--li--86367"><a class="categoryNavigation-module--li--86367 text-black" href="/python/">Python</a></li></ul><span class="categoryNavigation-module--rightFade--71501"/><span class="categoryNavigation-module--leftFade--a3344"/></div><button class="categoryNavigation-module--hoverIcon--8248f absolute right-2 z-10 px-3"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg></button></div><button class="right-8 px-3 ml-4 categoryNavigation-module--hoverIcon--8248f "><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="magnifying-glass" class="svg-inline--fa fa-magnifying-glass " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg></button></div></nav><article aria-label="Article title: Simulating Delay using jQuery and setTimeout()" class="flex mx-auto pt-6 max-w-screen-2xl 2xl:justify-between"><div class="hidden w-[120px] basis-[120px] 2xl:block"/><div class="w-full max-w-screen-xl pt-0 p-6 mx-auto lg:pt-0 2xl:max-w-[calc(100%_-_240px)]"><div class="block lg:items-stretch lg:flex lg:flex-row"><div class="w-full lg:basis-[calc(100%_-_400px)] lg:w-[calc(100%_-_400px)] lg:min-w-0"><header class="overflow-hidden mx-auto mb-10 w-full"><div class="flex flex-end mb-0"><a class="text-primary-700 font-bold hover:text-primary-500" href="/javascript/">JavaScript</a></div><h1 class="font-bold leading-10 mb-4 mt-1">Simulating Delay using jQuery and setTimeout()</h1><ul class="flex flex-row flex-wrap text-sm mb-3 font-bold"><a class="py-1 px-2 mr-2 mb-2 bg-gray-200 text-black hover:text-primary-700 hover:bg-primary-100 font-bold text-sm" href="/javascript/jquery/">jQuery</a></ul><div class="space-y-4 sm:space-y-0 sm:flex sm:justify-between"><div class="flex items-center relative"><a class="Header-module--imgContainer--90276 z-10" href="/author/sdeering/"><img alt="Sam Deering" src="https://uploads.sitepoint.com/wp-content/uploads/2018/10/1539663963Sam-Deering-150x150.jpg" class="Header-module--img--e5104"/></a><div class="ml-4 mb-0"><address class="not-italic -mb-2"><a class="Header-module--link--313d0" href="/author/sdeering/">Sam Deering</a></address><time class="text-sm" datetime="2012-08-26">August 26, 2012</time></div></div><div class="flex items-center"><span class="font-bold mr-2">Share</span><button aria-label="Share SitePoint on facebook" data-network="facebook" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-facebook" class="svg-inline--fa fa-square-facebook fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg></button><button aria-label="Share SitePoint on reddit" data-network="reddit" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="reddit" class="svg-inline--fa fa-reddit fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/></svg></button><button aria-label="Share SitePoint on twitter" data-network="twitter" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-twitter" class="svg-inline--fa fa-square-twitter fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z"/></svg></button><button aria-label="Share SitePoint on linkedin" data-network="linkedin" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></button><button aria-label="Share SitePoint on email" data-network="email" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-black"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></button></div></div></header><section aria-label="Article content for Simulating Delay using jQuery and setTimeout()" class="Body-module--section--154bb space-y-6 overflow-hidden mx-auto mb-7 w-full"><div class=""> <p>Sometimes you may wish to <strong>simulate a delay of events</strong> such as simulating loading of results before showing on the page. This example uses a <strong>recursive setTimeout()</strong> to call a function which loops through an array of data which has the results of a system precheck to check for things such as JavaScript, Flash, Browser Version etc… <em>When I get time I might code this into a jQuery plugin which will be easy just need to determine which options to provide to cater for different usage</em>.</p><div class="inline-content"/> <h3>jQuery Code Recursive setTimeout()</h3> <p>//data and settings<br/> var result = ‘</p> <p class="{$color}">Precheck passed.</p><div class="custom-content"/> <p>‘, //html for main result<br/> delay = 500, //delay of sub results<br/> data = Array(<br/> <li class="green">Javascript <img decoding="async" src="https://www.jquery4u.com/images/green_tick_small.gif" loading="lazy"/></li> <li class="orange">System <img decoding="async" src="https://www.jquery4u.com/images/green_tick_small.gif" loading="lazy"/></li> <li class="green">Device <img decoding="async" src="https://www.jquery4u.com/images/green_tick_small.gif" loading="lazy"/></li> <li class="green">Browser <img decoding="async" src="https://www.jquery4u.com/images/green_tick_small.gif" loading="lazy"/></li> <li class="green">Flash <img decoding="async" src="https://www.jquery4u.com/images/green_tick_small.gif" loading="lazy"/></li><div class="custom-content"/> <p>//self executing function starting from array index 0<br/> (function process_els(el_index) {</p> <p> var el = data[el_index],<br/> precheckUl = $(‘#precheck ul’),<br/> loadingLi = $(‘</p> sysPreId = “syspre_”+el_index;</p><div class="inline-content"/> <p> //show loading image<br/> precheckUl.append(loadingLi.clone().attr(“id”,sysPreId));</p> <p> //after simulated delay replace loading image with sub check result<br/> setTimeout( function()<br/> precheckUl.find(‘li.loading:first’).replaceWith(data[el_index]);</p> <p> }, delay);</p> <p> //to simulate the delay recursively call itself until all array elements have been processed<br/> if (el_index + 1 HTML</p> <h2>System Check</h2> </div><aside class="flex space-x-4"><div class="font-bold text-lg my-2 mr-2">Share This Article</div><button aria-label="Share SitePoint on facebook" data-network="facebook" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-facebook" class="svg-inline--fa fa-square-facebook fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg></button><button aria-label="Share SitePoint on reddit" data-network="reddit" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="reddit" class="svg-inline--fa fa-reddit fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/></svg></button><button aria-label="Share SitePoint on twitter" data-network="twitter" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-twitter" class="svg-inline--fa fa-square-twitter fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z"/></svg></button><button aria-label="Share SitePoint on linkedin" data-network="linkedin" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg></button><button aria-label="Share SitePoint on email" data-network="email" class="social-share-button mr-2 cursor-pointer transform transition duration-200 hover:scale-125 text-primary-700"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-lg share-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512"><path fill="currentColor" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg></button></aside></section><aside class="mx-auto mb-7 w-full space-y-8"><div class="border-2 border-gray-200 py-2 px-5 space-y-8"><address class="flex flex-row space-x-4 my-4 mx-auto not-italic"><a class="shrink-0 h-20 w-20" href="/author/sdeering/"><img class="h-full w-full object-cover rounded-full" src="https://uploads.sitepoint.com/wp-content/uploads/2018/10/1539663963Sam-Deering-150x150.jpg" alt="Sam Deering" loading="lazy"/></a><div><a class="font-bold transition-colors text-body hover:text-gray-400" href="/author/sdeering/">Sam Deering</a><p class="mb-0">Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.</p><ul class="space-x-4 my-1"><a href="https://github.com/sdeering" rel="noreferrer noopener" target="_blank" aria-label="Sam Deering's github account" class="text-body"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-github" class="svg-inline--fa fa-square-github fa-lg share-icon cursor-pointer transform transition duration-200 hover:scale-125" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM265.8 407.7c0-1.8 0-6 .1-11.6c.1-11.4 .1-28.8 .1-43.7c0-15.6-5.2-25.5-11.3-30.7c37-4.1 76-9.2 76-73.1c0-18.2-6.5-27.3-17.1-39c1.7-4.3 7.4-22-1.7-45c-13.9-4.3-45.7 17.9-45.7 17.9c-13.2-3.7-27.5-5.6-41.6-5.6s-28.4 1.9-41.6 5.6c0 0-31.8-22.2-45.7-17.9c-9.1 22.9-3.5 40.6-1.7 45c-10.6 11.7-15.6 20.8-15.6 39c0 63.6 37.3 69 74.3 73.1c-4.8 4.3-9.1 11.7-10.6 22.3c-9.5 4.3-33.8 11.7-48.3-13.9c-9.1-15.8-25.5-17.1-25.5-17.1c-16.2-.2-1.1 10.2-1.1 10.2c10.8 5 18.4 24.2 18.4 24.2c9.7 29.7 56.1 19.7 56.1 19.7c0 9 .1 21.7 .1 30.6c0 4.8 .1 8.6 .1 10c0 4.3-3 9.5-11.5 8C106 393.6 59.8 330.8 59.8 257.4c0-91.8 70.2-161.5 162-161.5s166.2 69.7 166.2 161.5c.1 73.4-44.7 136.3-110.7 158.3c-8.4 1.5-11.5-3.7-11.5-8zm-90.5-54.8c-.2-1.5 1.1-2.8 3-3.2c1.9-.2 3.7 .6 3.9 1.9c.3 1.3-1 2.6-3 3c-1.9 .4-3.7-.4-3.9-1.7zm-9.1 3.2c-2.2 .2-3.7-.9-3.7-2.4c0-1.3 1.5-2.4 3.5-2.4c1.9-.2 3.7 .9 3.7 2.4c0 1.3-1.5 2.4-3.5 2.4zm-14.3-2.2c-1.9-.4-3.2-1.9-2.8-3.2s2.4-1.9 4.1-1.5c2 .6 3.3 2.1 2.8 3.4c-.4 1.3-2.4 1.9-4.1 1.3zm-12.5-7.3c-1.5-1.3-1.9-3.2-.9-4.1c.9-1.1 2.8-.9 4.3 .6c1.3 1.3 1.8 3.3 .9 4.1c-.9 1.1-2.8 .9-4.3-.6zm-8.5-10c-1.1-1.5-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3c1.1 1.5 1.1 3.3 0 4.1c-.9 .6-2.6 0-3.7-1.5zm-6.3-8.8c-1.1-1.3-1.3-2.8-.4-3.5c.9-.9 2.4-.4 3.5 .6c1.1 1.3 1.3 2.8 .4 3.5c-.9 .9-2.4 .4-3.5-.6zm-6-6.4c-1.3-.6-1.9-1.7-1.5-2.6c.4-.6 1.5-.9 2.8-.4c1.3 .7 1.9 1.8 1.5 2.6c-.4 .9-1.7 1.1-2.8 .4z"/></svg></a><a href="https://twitter.com/samdeering" rel="noreferrer noopener" target="_blank" aria-label="Sam Deering's twitter account" class="text-body"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-twitter" class="svg-inline--fa fa-square-twitter fa-lg share-icon cursor-pointer transform transition duration-200 hover:scale-125" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z"/></svg></a></ul></div></address></div><div class="flex flex-wrap"><span data-href="https://www.sitepoint.com/tag/jquery/" tabindex="0" role="link" class="px-2 py-1 mr-2 text-sm font-bold text-black bg-gray-200 cursor-pointer hover:text-primary-700 hover:bg-primary-100">jQuery</span><span data-href="https://www.sitepoint.com/tag/settimeout/" tabindex="0" role="link" class="px-2 py-1 mr-2 text-sm font-bold text-black bg-gray-200 cursor-pointer hover:text-primary-700 hover:bg-primary-100">setTimeout</span></div></aside></div><div class="w-full hidden space-y-4 lg:block lg:w-[400px] lg:basis-[400px]" aria-label="Article Sidebar"/></div><aside class="mx-6 mb-6"><div class="font-bold text-2xl">Up Next</div><div class="grid grid-flow-row gap-4 m-4 md:grid-cols-2 md:grid-rows-3 lg:grid-cols-3 lg:grid-rows-2"><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/delay-sleep-pause-wait/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2019/11/1651456891js-delay-sleep-pause.jpg" loading="lazy" alt="Delay, Sleep, Pause &amp; Wait in JavaScript"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/delay-sleep-pause-wait/">Delay, Sleep, Pause &amp; Wait in JavaScript</a><a class="text-sm text-gray-400" href="/author/jhibbard/">James Hibbard</a></div></article><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/javascript-settimeout-function-examples/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2015/08/1476830355set_timeout_2-01.png" loading="lazy" alt="setTimeout JavaScript Function: Guide with Examples"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/javascript-settimeout-function-examples/">setTimeout JavaScript Function: Guide with Examples</a><a class="text-sm text-gray-400" href="/author/jhibbard/">James Hibbard</a></div></article><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/show-modal-popup-after-time-delay/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2016/09/1477382703popup.png" loading="lazy" alt="Quick-Tip: Show Modal Popup after Time Delay"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/show-modal-popup-after-time-delay/">Quick-Tip: Show Modal Popup after Time Delay</a><a class="text-sm text-gray-400" href="/author/jhibbard/">James Hibbard</a></div></article><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/5-ways-prevent-300ms-click-delay-mobile-devices/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" loading="lazy" alt="5 Ways to Prevent the 300ms Click Delay on Mobile Devices"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/5-ways-prevent-300ms-click-delay-mobile-devices/">5 Ways to Prevent the 300ms Click Delay on Mobile Devices</a><a class="text-sm text-gray-400" href="/author/craig-buckler/">Craig Buckler</a></div></article><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/ie10-windows-7-delay/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" loading="lazy" alt="IE10 for Windows 7: Why the Delay?"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/ie10-windows-7-delay/">IE10 for Windows 7: Why the Delay?</a><a class="text-sm text-gray-400" href="/author/craig-buckler/">Craig Buckler</a></div></article><article class="flex flex-row p-2"><a class="shrink-0 h-20 w-20" href="/simulating-high-dynamic-range-hdr-with-photoshop/"><img class="h-full w-full object-cover" src="https://uploads.sitepoint.com/wp-content/uploads/2023/08/1692781397fallback.svg" loading="lazy" alt="Simulating High Dynamic Range (HDR) With Photoshop"/></a><div class="ml-3 flex flex-col space-y-1"><a class="text-base font-bold text-black hover:text-gray-400" href="/simulating-high-dynamic-range-hdr-with-photoshop/">Simulating High Dynamic Range (HDR) With Photoshop</a><a class="text-sm text-gray-400" href="/author/jgeorge/">James George</a></div></article></div></aside></div><div class="hidden w-[120px] basis-[120px] 2xl:block"/></article></main><footer class="px-4 py-12 text-gray-300 bg-spBlack"><nav aria-label="Footer Navigation" class="flex flex-wrap w-full max-w-screen-xl mx-auto"><div class="flex flex-wrap flex-auto flex-shrink-0 w-full"><section class="flex-auto flex-shrink-0 mb-6 mr-2"><div class="mb-4 text-lg font-semibold leading-tight text-white">Stuff we do</div><ul class="mb-0 space-y-4 text-sm"><li><a href="https://www.sitepoint.com/premium/library/" class="font-normal text-gray-300">Premium</a></li><li><a class="font-normal text-gray-300" href="/newsletters/">Newsletters</a></li><li><a href="https://www.sitepoint.com/community/" class="font-normal text-gray-300">Forum</a></li></ul></section><section class="flex-auto flex-shrink-0 mb-6 mr-2"><div class="mb-4 text-lg font-semibold leading-tight text-white">About</div><ul class="mb-0 space-y-4 text-sm"><li><a class="font-normal text-gray-300" href="/about-us/">Our story</a></li><li><a class="font-normal text-gray-300" href="/legals/">Terms of use</a></li><li><a class="font-normal text-gray-300" href="/privacy-policy/">Privacy policy</a></li><li><a class="font-normal text-gray-300" href="/premium-for-teams/">Corporate memberships</a></li></ul></section><section class="flex-auto flex-shrink-0 mb-6 mr-2"><div class="mb-4 text-lg font-semibold leading-tight text-white">Contact</div><ul class="mb-0 space-y-4 text-sm"><li><a class="font-normal text-gray-300" href="/contact-us/">Contact us</a></li><li><a href="https://support.sitepoint.com/hc/en-us" class="font-normal text-gray-300">FAQ</a></li><li><a href="https://sitepoint.typeform.com/to/HtAXVN" class="font-normal text-gray-300">Publish your book with us</a></li><li><a class="font-normal text-gray-300" href="/write-for-us/">Write an article for us</a></li><li><a class="font-normal text-gray-300" href="/partnerships/">Advertise</a></li></ul></section><section class="flex-auto flex-shrink-0 w-full max-w-screen-xs"><div class="mb-4 text-lg font-semibold leading-tight text-white">Connect</div><ul class="flex mb-4 space-x-2 text-sm "><li><a href="https://www.facebook.com/sitepoint" class="text-gray-300" rel="noopener noreferrer" target="_blank"><span class="sr-only">Facebook</span><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-facebook" class="svg-inline--fa fa-square-facebook fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h98.2V334.2H109.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H255V480H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg></a></li><li><a href="https://twitter.com/sitepointdotcom" class="text-gray-300" rel="noopener noreferrer" target="_blank"><span class="sr-only">Twitter</span><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="square-twitter" class="svg-inline--fa fa-square-twitter fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM351.3 199.3v0c0 86.7-66 186.6-186.6 186.6c-37.2 0-71.7-10.8-100.7-29.4c5.3 .6 10.4 .8 15.8 .8c30.7 0 58.9-10.4 81.4-28c-28.8-.6-53-19.5-61.3-45.5c10.1 1.5 19.2 1.5 29.6-1.2c-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3c-9-6-16.4-14.1-21.5-23.6s-7.8-20.2-7.7-31c0-12.2 3.2-23.4 8.9-33.1c32.3 39.8 80.8 65.8 135.2 68.6c-9.3-44.5 24-80.6 64-80.6c18.9 0 35.9 7.9 47.9 20.7c14.8-2.8 29-8.3 41.6-15.8c-4.9 15.2-15.2 28-28.8 36.1c13.2-1.4 26-5.1 37.8-10.2c-8.9 13.1-20.1 24.7-32.9 34c.2 2.8 .2 5.7 .2 8.5z"/></svg></a></li><li><a href="/sitepoint.rss" class="text-gray-300"><span class="sr-only">RSS Feed</span><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-rss" class="svg-inline--fa fa-square-rss fa-2x " role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="currentColor" d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg></a></li></ul><div><p class="mb-4 text-xs">© 2000 – 2024 SitePoint Pty. Ltd.</p><p class="text-xs recaptcha-branding">This site is protected by reCAPTCHA and the Google<a href="https://policies.google.com/privacy" class="text-current" rel="noopener noreferrer" target="_blank"> Privacy Policy </a>and<a href="https://policies.google.com/terms" class="text-current" rel="noopener noreferrer" target="_blank"> Terms of Service </a>apply.</p></div></section></div></nav></footer><noscript>&lt;img height="1"