BOM experience - timer

I always thought that the return value of timer was of Object type, so timer initialization also wrote null. Today, I found that the return value is number, although it's not harmful, but some of my friends see this sentence and change their understanding

I think it's good to use only set/clearInterval method. It can realize all the functions of another method

There are two ways to enable timers:

1, setInterval(,)

  • Periodic execution function body. If this method does not stop actively, it will be executed all the time
  • The first parameter is the executed function body. Generally, the function method or anonymous method with function name is passed in. It is not recommended to directly pass in the function body. The code readability will be poor, and no one should do so
  • The second parameter is cycle time, in milliseconds

2, setTimeout(,)

  • Execute the function body after the specified time. If there is output, it will output continuously
  • The first parameter is also the function body to be executed
  • The second parameter is the specified delay time, in milliseconds

How to stop the timer:

1, clearclearInterval()

  • Stop timer called by setInterval() method
  • Define a variable in advance (usually timer) to receive setInterval(), and pass the variable to clearInterval() directly after execution

2, clearTimeout()

  • The same as above
 1 <script>
 2         window.onload = function () {
 3             //demand:Click Close,The billboard disappears,Add gradient effect with timer
 4             var timer = 0;
 5             var ad = document.getElementsByClassName('ad')[0];
 6             var a = ad.children[0].firstElementChild || ad.children[0].firstChild;
 7 
 8             a.onclick = function () {
 9                 //set timer 
10                 timer = setInterval(function() {
11                     ad.style.opacity -= 0.1;
12                     //After transparency is 0,Hide billboard,Clear timer
13                     if (ad.style.opacity <= 0) {
14                         ad.style.display = "none";
15                         clearInterval(timer);
16                     }
17                 },50);
18             }
19 
20 
21             var ad_both = document.body.children;         
22             setTimeout(function() {
23                 ad_both[1].style.display = "none";
24                 ad_both[2].style.display = "none";
25             },5000);
26             clearTimeout(timer);
27         }
28     </script>
29 </head>
30 <body>
31     <div class="top_banner">
32         <div class="nav">Navigation bar</div>
33         <div class="ad w" style="opacity: 1;">  <!--I don't understand it here.,Not in line,Yes bug-->
34             <div class="close_ad">
35                 <a href="#">×</a>
36             </div>
37         </div>
38         <div class="search w"></div>
39     </div>
40     <div class="ad_l">I'll disappear in five seconds</div>
41     <div class="ad_r">I'll disappear in five seconds</div>
42 </body>

Keywords: Javascript

Added by drock on Thu, 02 Apr 2020 04:36:53 +0300