タイマー setInterval() および setTimeout()

jsの2種類のタイマー

1.setInterval()

指定された間隔 (ミリ秒単位) で関数を呼び出すか、式を評価します。clearInterval() が呼び出されるか、ウィンドウが閉じられるまで、メソッドは関数を呼び出し続けます。

文法：

window.setInterval(code, millisec)

知らせ：

ウィンドウは省略できます。
最初のパラメーター:繰り返し実行するコード、必須、3 つの形式があり、関数を直接記述する、関数名を記述する、および文字列を記述することができます”functionName()”。
2 番目のパラメータ: interval のミリ秒数, これは必須です. 省略した場合, デフォルトは 0 です. 記述する場合, 単位はミリ秒である必要があります. つまり, この関数はミリ秒ごとに自動的に呼び出されます. (1000 ミリ秒 = 1 秒)

clearInterval(id_of_setinterval)タイマーをクリアするために使用します。setInterval()関数を呼び出すと戻り値が得られ、戻り値の識別子を引数としてsetInterval()で設定したタイミング実行動作をキャンセルすることができます。(vueやアプレットでは、ページ切り替え後、元のページで設定したタイマーをクリアしないと残ります)

<div class="box">
    <button onclick="start()">开始</button>
    <button onclick="stop()">停止</button>
</div>
<script>
    let int = null
    function logTime(num) {
        
        
        console.log(new Date().toLocaleTimeString());
    }
    function start() {
        
        
        //直接写函数
        int = setInterval(()=>{
        
        
            console.log(new Date().toLocaleTimeString());
        }, 1000)
        //写函数名
        // int = setInterval(logTime, 1000)
        //写字符串"functionName()"
        // int = setInterval("logTime()", 1000)
        //以上三种写法都是每隔一秒在控制台输出一次当前时间，直到 clearInterval() 被调用或窗口被关闭。
    }
    function stop() {
        
        
        clearInterval(int)
        //或
        // int = clearInterval(int)
        //或
        // int = window.clearInterval(int)
    }
</script>

2.setTimeout()

指定されたミリ秒数の後に、関数を呼び出すか式を評価します。

文法：

window.setTimeout(code, millisec)

ウィンドウは省略できます。
最初のパラメータコード:定期的に実行されるコード. 3 つの形式が必要です. 関数を直接記述したり、関数名を記述したり、文字列を記述したりできます"functionName()".
2 番目のパラメータ: interval のミリ秒数, これは必須です. 省略した場合, デフォルトは 0 です. 記述する場合, 単位はミリ秒である必要があります. つまり, この関数はミリ秒ごとに自動的に呼び出されます. (1000 ミリ秒 = 1 秒)

clearTimeout(id_of_setinterval)タイマーをクリアするために使用します。関数呼び出しsetTimeout()時にリターン値を取得し、リターン識別子をパラメータとしてsetTimeout()セット。(次の例がタイマーの開始後 3 秒以内に実行される場合clearTimeout(int)、logTime()関数は実行される機会がありません)

function start(params) {
      
      
    //直接写函数
    // int = setTimeout(()=>{
      
      
    //     console.log(new Date().toLocaleTimeString());
    // }, 1000)
    //写函数名
    //  int = setTimeout(logTime, 1000)
    //写字符串'functionName()”
    int = setTimeout("logTime()", 3000)
    //以上三种写法都是3秒后在控制台输出当前时间（只输出一次）
}
function stop() {
      
      
    // clearTimeout(int)
    //或
    // int = clearTimeout(int)
    //或
    int = window.clearTimeout(int)
}