外部JavaScriptファイルの変数の変更をリッスンする

Question

多くのajaxを使用するこのeコマースプラットフォームがあります。バックオフィス注文セクションには、注文リストページと詳細注文ページの2つの可能性があります。 URLは変更されませんが、どのページにあるのかを教えても簡単ですが、そうではありません。

このプラットフォームはajaxを使用して変数に値を割り当てます。この値を使用すると、この変数の変更を取得するためにsetInterval（）を使用することができます。私はsetInterval（）を使用して嫌いので、私は代替案を探しています。

なぜ私はそれが嫌いですか？このeコマースで "ヘルプ"を使用し、終日開いているクライアントを想像してみてください。 setInterval（）はこのような状況では嫌です。

私は、この外部のjavascriptでプラットフォームが動作するようにコントロールしていないので、この変数に何らかのリスナーを使用する方法が必要です。

私が見つけた最高のものはAkira's answerですが、この変数は定義するコントロールにないため使用できません。

これは私がやったことです：

setInterval(function() {//get the variable from the source code of the platform; it changed? do stuff}, 1000); 

あなたがたsetInterval（よりそれを行うには良い方法を知っていますか）？コードを改善するだけです。 Thxを

編集：この変数はスクリプトではなく、html要素である

編集2：this linkは多少のsetInterval（より良い方法である）、基本的には改善されたsetInterval（）を使用するので、クライアントには一日中プラットフォームを開いたままにしておいても大丈夫ですが、使用するにはクライアントがページ上で何らかのアクティビティを検出する必要があります。何が必要ですか？リスナーsoooo、正方形に戻る

Answer 1

SuperNovas's answer edited by alexコードの書き込み数行は、我々はページ上のアクティビティを検出したsetInterval（）までの時間を設定する上で動作することができます一つのことです。 回答の中で最もクリーンなものではないが、それは何かだ。誰かがより良い答えを出すまでは、スレッドを解決済みとマークする。おかげさまで

Answer 2

これにはVue.jsフレームワークを使用できます。サンプルコードでjsfiddleを作成しました。したがって、Vue.jsフレームワークが自動的に変数をチェックして更新するというアイデアです。しかし、それはあなたの 'プラットフォーム'オブジェクトのコードを追加する必要があります。だから、機能するかもしれません。とにかく、あなたはあなたがする必要があるすべてのbecouse試すことができます:-)

window.someObjectOfThePlatform = { 
     variable1:"Test", 
     updateVariable1:function(){ 
     this.variable1 = "New val " + Math.random(10);  
     } 
    }; 

    Vue.component('your-component', { 
     template:"<div>{{ variable1 }}</div>", 
     data:function(){ 
     /* all magic is here. The Vue framework automaticaly add 
      methods to look at variables and update values 
     */ 
     return window.someObjectOfThePlatform 
     }, 
     watch: { 
     // whenever variable1 changes, this function will run 
     variable1: function (newValue) { 
      console.log("variable1 updated"); 
     } 
    } 
    }); 

    var app = new Vue({ 
     el: '#app' 
    });