Home > Developer > JavaScript
Two days ago, a friend asked me how to use JavaScript to implement the alarm. I thought it was very simple and there were ready-made functions available. However, I found that the ready-made alarm function setTimeout () only provided the timer capability once, friends need to repeat the timing multiple times. In fact, this requirement is very common in real life and has a wide range of requirements. In desperation, you can only write a simple alarm by yourself.
The simple alarm implementation procedure is as follows:
<HTML> <br/> <pead> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> var timer_count = 0; <br/> var timer_is_on = false; <br/> var timer_id; <br/> function do_alarm () <br/>{< br/> document. getelementbyid ('Count '). value = timer_count; <br/> ++ timer_count; <br/>}< br/> function do_timeout (timeout) <br/>{< br/> do_alarm (); <br/> timer_id = setTimeout ("do_timeout (" + timeout + ")", timeout); <br/>}< br/> function start_timer (timeout) <br/>{< br/> If (! Timer_is_on) <br/>{< br/> timer_window = Window; <br/> timer_is_on = true; <br/> do_timeout (timeout ); <br/>}< br/> function stop_timer () <br/>{< br/> If (timer_is_on) <br/>{< br/> cleartimeout (timer_id); <br/> timer_is_on = true; <br/> timer_count = 0; <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <form> <br/> <input type = "button" value = "Start Timer! "Onclick =" start_timer (1000) "> <br/> <input type =" button "value =" Stop timer "onclick =" stop_timer () "> <br/> <input type =" text "id =" count "> <br/> </form> <br/> </body> <br/> </ptml>
From the code, we can see that:
1) start_timer () and stop_timer () are two control functions of timer. The timeout parameter is mainly used to set the timeout interval. The unit is milliseconds.
2) The do_timeout () function mainly notifies you that the scheduled time has reached and sets the next round of scheduled time.
3) do_alarm () is the code that the user needs to execute. In the code, we demonstrate a small function of timed counting, while the user has an intuitive observation.
One of its major disadvantages is that it cannot support multiple alarm clocks. In practical applications, it has very limited limitations, because complex applications are very common to support multiple alarm clocks. How can we achieve this?
1) You need to modify start_timer and stop_timer to provide the identifier for returning different timer. Based on this identifier, the application can dynamically control the start and stop of the alarm.
2) The timer list must be provided to maintain different timers.
Because the above Code framework has taken this into consideration, I believe that users who like the research will be able to easily implement multiple alarm clocks. In the implementation of multiple alarm clocks, you need to pay attention to how to maintain the consistency of the timer list, such as how to overcome the impact of user deletion operations and how to ensure synchronization during alarm.
[Summary]
-JavaScript provides a simple alarm function setTimeout (), but it has limitations (it can only be timed once ).
-The solution provided in this article is just a simple alarm clock, which is powerless for complex requirements. The reason why a complete alarm clock is not provided is that it has already met the needs of friends, and there is no motivation to improve again :-).
-If a powerful JavaScript library is ready for use, it is best to use it. After all, writing code by yourself requires too much time and effort, and strict testing is often lacking, present it to programmers in the most cruel way at key times.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
