#28 JS: Timing Events - Part 2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 28

Modern Web

Learn & Play JavaScript -- Entry-Level Front-End Web Development系列第 28 篇

#28 JS: Timing Events - Part 2

13th鐵人賽 javascript js front-end frontend

Vida Lin

2021-09-28 23:28:22

805 瀏覽

After introducing about the 2 methods for timing events in the last article, let's practice by examples:

Example 1. setTimeout

Usage Scenario: transfer the web page from price comparison to Ads or an e-commerce company's page.

Count down from 3 seconds:

<body onload="init();">
    <span id="timer">3</span> 
 
<script type="text/javascript">
let timer;
function init(){ 
    timer=document.getElementById("timer");
    window.setTimeout(countdown, 1000);
}
 
function countdown (){
    timer.innerHTML=timer.innerHTML-1;
    if(timer.innerHTML>0){ //It will continue counting down until meeting 0.
        window.setTimeout(countdown, 1000);  
    }else{
        document.location="https://vidalin-777.medium.com/";
    }
}
    
</script>
</body>

Example 2. setInterval

Usage Scenario: same as example 1.

Count down from 3 second, same as example 1, but setInterval will continue repeating the function. And we can skip window.setTimeout(countdown, 1000); to simplify the function.

<script type="text/javascript">
let timer;
function init(){ 
    timer=document.getElementById("timer");
    window.setInterval(countdown, 1000); 
}
function countdown (){
    timer.innerHTML=timer.innerHTML-1;
    if(timer.innerHTML>0){
    }else{
        document.location="https://vidalin-777.medium.com/";
    }
}
</script>

Music of Today: Run by Phum Viphurit

Like/Share/Follow

Feel free to comment and share your ideas below to learn together!
If you guys find this article helpful, please kindly do the writer a favor — LIKE this article.