set Timeout&set Interval

2650 ワード

JavaScriptは単一スレッド言語であるが、コードは、時間超過値と間欠時間値を設定することによって特定の時刻に実行されるようにスケジューリングされる.
set Timeout
setTimeout(function() {
    alert('hello word')
}, 1000)
上記のコードは一秒後に警告枠をイジェクトするように設定されています.setTimeoutには二つのパラメータがあります.一つ目は一つの関数を伝達し、二つ目はミリ秒で、設定されたミリ秒数を待って関数の動作を行います.
ただし、この時間が過ぎると必ず指定された関数コードが実行されるとは限りません.理由は:JavaScriptは単一スレッドのインタプリタであるため、一定の時間でコードを実行するしかないからです.実行するコードを制御するために、JavaScriptタスクのキューがあります.これらのタスクはキューに追加された順に実行されます.setTimeout()の2番目のパラメータは、JavaScriptがどれぐらいの時間を経て現在のタスクをキューに追加するかを教えます.キューが空の場合、追加コードはすぐ実行されます.列が空ではないなら、前のコードが実行されたら実行します.
setTimeoutを呼び出した後、この方法はタイムアウトコールを表す数値IDを返します.このタイムアウトコールIDは実行予定コードの一意識別子であり、タイムアウトコールをキャンセルすることができる.未実行のタイムアウトコールプランをキャンセルするには、clearTimeoutメソッドを呼び出してIDをパラメータとして渡すことができます.
var timeoutId = setTimeout(function () {
    alert('hello world')
})
clearTimeout(timeoutId)
set Interval
間欠呼び出しはタイムアウト呼び出しと同様ですが、間欠呼び出しがキャンセルされるか、またはページがアンインストールされるまで、指定された時間間隔でコードを繰り返します.
setInterval(function () {
    alert('hello world')
}, 1000)
set Interval()を起動する方法は同様に、間欠コールを将来のある時点でキャンセルするための間欠コールIDを返すことができる.間欠コールをキャンセルするには、clear Interval()方法を使用して、対応する間欠コールIDを入力しても良い.
var max = 10
var num = 0
var intervalId = setInterval(function () {
    num++
    if (num === max) { //  num            
        clearInterval(intervalId)
    }
}, 1000)
面白い面接問題
for (var i = 1; i <=5; i++) {
    setTimeout( function timer () {
        console.log(i)
    }, i * 1000);
}
//         ,      1,2,3,4,5
上のsetTimeoutの実行呼び出しによれば、JSは単一スレッドのトランシーバーであり、一時的にコードのみ実行され、JSを実行するために自分のタスクキューがあることを制御するために、これらのタスクはそれらをタスクキューに追加する順序で実行され、setTimeoutの時間パラメータはJSにどのぐらいの時間を教えてからキューに追加されます.したがって、上のsetTimeoutで実行する関数は、forループが完了するまで、もう一秒後にsetTimeoutの関数をタスクキューに追加して実行します.
上のコードを直接実行すると、1秒ごとに6が出力されます.setTimeoutの関数を実行すると、iは6になりました.
異なる数字を実現するには、各タイマーがアクセスする変数を独立させる必要があります.これはJSのクローズドです.
  • は、クローズドパケットを使用して解決されるクローズドパケットとは、別の関数作用領域にアクセスできる変数の関数
  • を意味する.
    //  setTimeout              ,   i         
    for (var i = 1; i <=5; i++) {
        (function(value) {
                setTimeout( function timer () {
                    console.log(i)
                }, i * 1000);
            }
        )(i)
    }
    
    ループ内部では、即時呼び出し関数(IIIIIFE)は、受け入れられた各変数iのコピーを作成し、変数valueとして保存します.この変数の値は、反復によって作成された関数の値です.したがって、各関数を呼び出して0から9サイクルのように所望の値が得られます.
  • ブロックレベル作用領域letを使用して
  • を解決する.
    for (let i = 1; i <= 5; i++) {
        setTimeout( function timer () {
            console.log(i)
        }, i * 1000);
    }
    
    毎回循環するたびにlet声明は新しい変数iを作成し、iの現在値に初期化するので、循環内部で作成された各関数は自分のiのコピーを得ることができます.
    リンクsetTimeoutの面接試験問題を参照してください.