Vueステップアップ(七十八):VueタイマとJSタイマsetInterval()とsetTimeout()

vueでは、ブラウザAPI、windowオブジェクトの2つのタイマがあります.もう1つはvue/nodejsパッケージで、導入する必要があります

import { setInterval, clearInterval } from 'timers'

Windowsオブジェクトが持参したものを使うことをお勧めします.間違いにくいからです.うっかり一つだけ導入してしまうと、なかなかクリアできません.

import { setInterval } from 'timers' //   

必ずbeforeDestroyでタイマーをクリアしてください.

data () {
    return {
        timer: 0
    }
},
//           
created () {
    this.timer = setInterval(() => {
         //do something
         //              this   
    }, 5000)
},
//        
beforeDestroy () {
    clearInterval(this.timer)
}

jsタイマには、次の2つの方法があります.

setInterval():指定した周期(ミリ秒)で関数または計算式を呼び出します.メソッドは、clearInterval()が呼び出されるか、ウィンドウが閉じるまで関数を呼び出し続けます.

settimeout():指定したミリ秒数後に関数または計算式を呼び出します.

setInterval()
構文

setInterval(code,millisec,lang)

パラメータの説明

codeが必要です.呼び出す関数または実行するコード列.

millisecは必須です.codeを周期的に実行または呼び出す間隔は、ミリ秒です.

langオプション.JScript | VBScript | JavaScript

次の例では、clock()関数を1000ミリ秒ごとに実行します.インスタンスには、実行を停止するボタンも含まれています.
リクエストやいくつかの効果を繰り返す必要がある場合、setIntervalの使用を考えるのが一般的ですが、その弊害は、プログラムに大きなリスクをもたらします.
一、弊害

setIntervalは、自分が呼び出したコードが間違っているかどうかに無関心です.呼び出されたコードが間違っていても、呼び出され続けます.

setIntervalネットワーク遅延を無視します.ajaxポーリングサーバを使用して新しいデータがあるかどうかは、setIntervalを使用する人が必ずいますが、ネットワークの状況にかかわらず、何度も要求を送信します.ネットワークの状況が不良で、1つの要求が発行され、結果が返されていない場合は、たゆまず要求を送信し続け、結果として要求が蓄積されます.

setIntervalはタイミングがありません.呼び出されたコードの実行時間がタイミングより小さい場合、呼び出されたコードはスキップされ、必要な実行回数や目的の結果が得られません.

二、ソリューションはsetIntervalの代わりにsettimeoutを使用する.settimeoutに時間を設定した後、最後に自分自身を呼び出すことができます.均一な速度(Uniform Velocity)でトリガしたい場合.コード実行時間を計算し、前回実行した時間を所望の遅延で減算できます.
注意:setIntervalの遅延時間を上記の数時間より長く設定して、絶対的な平均速度呼び出しを達成する考えがあります.しかし、実際には、jsのタイマは、自身のメカニズムのため、4 ms〜15 msの誤差がある.
settimeout()構文

setTimeout(code,millisec,lang)

パラメータの説明

codeが必要です.呼び出す関数の後に実行するJavaScriptコード列.

millisecが必要です.コードを実行する前に待機するミリ秒数.

langオプション.スクリプト言語は、Jscript|VBScript|JavaScript

ある関数でタイマーを有効にし、別の関数でこの関数を閉じる場合は、次のようにします.

var timer1 = null;

function start(){
    if ( timer1 )
    	return;
    timer1 = setInterval("test()",200);
}
function end(){
    if ( timer1 )
    {
	    clearInterval(timer1);
	    timer1 = null;
    }
}

注意事項:ここでtimer 1はsetIntervalのidに相当し、clearInterval(timer 1)メソッドを実行すると、タイマIDが入って停止します.