2016-12-13 6 views
0

最後に変更された後のある時間が破棄(または無効化)される変数を使用したいと思います。そんなことがあるの?揮発性(時間依存)変数は存在しますか?

私の使用シナリオは次のとおりです:websocketサーバーは、Vue.js vm(基本的に変数)に更新をプッシュし、DOMの変更をトリガーします。私はこの変更を最後の変更後のある時点で元に戻す(更新された要素が隠されている)ようにしたいと思います。

計画実装は上記vm変数の変化にフラグを更新するwatch周りに引き寄せ、次にフラグが一定時間に達すると隠蔽をトリガするvmを変更れるsetIntervalを介して定期的にチェック。

実行可能ですが、それは私にはとても賢明ではありません。

変数をnullに「フェードアウト」する方法がある場合は、DOM要素の可視性ステータスをトリガするのは簡単です。

このようなメカニズムはありますか?

答えて

1

私がこれを行う方法は、timeoutを使用して、一定の間隔の後にshowフラグをfalseに設定することです。ここで

var vm = new Vue({ 
    el: '#app', 
    watch: { 
    myVar() { 
     // Make sure we are showing the new value 
     this.show = true; 

     // Clear the timer because myVar has been updated 
     clearTimeout(this.timer); 

     this.timer = setTimeout(() => { 
     this.show = false; 
     }, 2000); // Now start the timer again 
    } 
    }, 
    data: { 
    show: false, 
    myVar: "", 
    timer: "" 
    } 
}); 

JSFiddleです::新しいアップデートを受信した場合、あなたがあなたのウォッチャーの内側に置くことができ、クリアして再起動することができますので、最も簡単な解決策はdataであなたのタイマーを宣言するだろうhttps://jsfiddle.net/w4jjey2t/

関連する問題