JS setInterval 函數調用

時間 2019-11-10

原文原文鏈接

本文小結setInterval在調用函數時使用到的方法和調試效果.

如下爲代碼格式;javascript

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Interval</title>
 6     <style>
 7         p {
 8             font-size: 26px;
 9         }
10 
11         .box {
12             height: 38px;
13             line-height: 38px;
14             border-bottom: 1px solid #000;
15         }
16     </style>
17 </head>
18 <body>
19 <h1>setInterval 函數調用方法:<br/>區別:1.有參數or沒有參數;2.使用匿名函數or聲明函數;</h1>
20 <p>1.沒有參數,使用匿名函數;運行成功;</p>
21 <p id="text-0" class="box"></p>
22 <p>2.有參數,使用匿名函數;運行成功;</p>
23 <p id="text-1" class="box"></p>
24 <p>3.沒有參數,使用聲明函數,格式:"(function_name(),delay)";只運行一次,且在載入時立刻運行;</p>
25 <p id="text-2" class="box"></p>
26 <p>4.沒有參數,使用聲明函數,格式:"(function_name,delay)";運行成功;</p>
27 <p id="text-3" class="box"></p>
28 <p>5.有參數,使用聲明函數;格式"(function_name(index),delay)";只運行一次,且在載入時立刻運行;</p>
29 <p id="text-4" class="box"></p>
30 <p>6.有參數,使用聲明函數;格式:使用匿名函數封裝-"(function(){function_name(index);},delay)";運行成功;</p>
31 <p id="text-5" class="box"></p>
32 </body>
33 <script type="text/javascript">
34     window.onload = function main() {
35         var t1 = document.getElementById("text-0"),
36                 t2 = document.getElementById("text-1"),
37                 t3 = document.getElementById("text-2"),
38                 t4 = document.getElementById("text-3"),
39                 t5 = document.getElementById("text-4"),
40                 t6 = document.getElementById("text-5"),
41                 T1 = null,
42                 T2 = null,
43                 T3 = null,
44                 T4 = null,
45                 T5 = null,
46                 T6 = null,
47                 clock = 0;
48         T1 = setInterval(function () {
49             t1.innerHTML += "*";
50             clock++;
51             if (clock > 60) {
52                 clearInterval(T1);
53                 clearInterval(T2);
54                 clearInterval(T3);
55                 clearInterval(T4);
56                 clearInterval(T5);
57                 clearInterval(T6);
58             }
59         }, 2000);
60         T2 = setInterval(function () {
61             t2.innerHTML = clock;
62         }, 2000);
63         T3 = setInterval(timer3(), 2000);
64         function timer3() {
65             t3.innerHTML += "*";
66         }
67 
68         T4 = setInterval(timer4, 2000);
69         function timer4() {
70             t4.innerHTML += "*";
71         }
72 
73         T5 = setInterval(timer5(clock), 2000);
74         function timer5(x) {
75             t5.innerHTML = x;
76         }
77 
78         T6 = setInterval(function () {
79             timer6(clock);
80         }, 2000);
81         function timer6(x) {
82             t6.innerHTML = x;
83         }
84     }
85 </script>
86 </html>

如下爲純文本格式,若是瀏覽器沒法查看代碼格式,請閱讀如下內容;html

/*-------------------------------------*/java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interval</title>
    <style>
        p {
            font-size: 26px;
        }

        .box {
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
<h1>setInterval 函數調用方法:<br/>區別:1.有參數or沒有參數;2.使用匿名函數or聲明函數;</h1>
<p>1.沒有參數,使用匿名函數;運行成功;</p>
<p id="text-0" class="box"></p>
<p>2.有參數,使用匿名函數;運行成功;</p>
<p id="text-1" class="box"></p>
<p>3.沒有參數,使用聲明函數,格式:"(function_name(),delay)";只運行一次,且在載入時立刻運行;</p>
<p id="text-2" class="box"></p>
<p>4.沒有參數,使用聲明函數,格式:"(function_name,delay)";運行成功;</p>
<p id="text-3" class="box"></p>
<p>5.有參數,使用聲明函數;格式"(function_name(index),delay)";只運行一次,且在載入時立刻運行;</p>
<p id="text-4" class="box"></p>
<p>6.有參數,使用聲明函數;格式:使用匿名函數封裝-"(function(){function_name(index);},delay)";運行成功;</p>
<p id="text-5" class="box"></p>
</body>
<script type="text/javascript">
    window.onload = function main() {
        var t1 = document.getElementById("text-0"),
                t2 = document.getElementById("text-1"),
                t3 = document.getElementById("text-2"),
                t4 = document.getElementById("text-3"),
                t5 = document.getElementById("text-4"),
                t6 = document.getElementById("text-5"),
                T1 = null,
                T2 = null,
                T3 = null,
                T4 = null,
                T5 = null,
                T6 = null,
                clock = 0;
        T1 = setInterval(function () {
            t1.innerHTML += "*";
            clock++;
            if (clock > 60) {
                clearInterval(T1);
                clearInterval(T2);
                clearInterval(T3);
                clearInterval(T4);
                clearInterval(T5);
                clearInterval(T6);
            }
        }, 2000);
        T2 = setInterval(function () {
            t2.innerHTML = clock;
        }, 2000);
        T3 = setInterval(timer3(), 2000);
        function timer3() {
            t3.innerHTML += "*";
        }

        T4 = setInterval(timer4, 2000);
        function timer4() {
            t4.innerHTML += "*";
        }

        T5 = setInterval(timer5(clock), 2000);
        function timer5(x) {
            t5.innerHTML = x;
        }

        T6 = setInterval(function () {
            timer6(clock);
        }, 2000);
        function timer6(x) {
            t6.innerHTML = x;
        }
    }
</script>
</html>

/*-------------------------------------*/



如下爲網頁效果圖;