javascript - 监听外部 JavaScript 文件中的变量更改

Question

有一个电子商务平台大量使用了ajax。在后台订单部分有两种可能性:订单列表页面和详细订单页面。 url 不会改变，如果它能告诉我在哪个页面，那就很容易了，但事实并非如此。

这个平台使用ajax为变量分配一些值，通过这个值我可以在我的代码中知道我在哪个页面，我能做的最好的就是使用setInterval()来获取这个变量的变化。我讨厌使用 setInterval() 所以我正在寻找替代方案。

为什么我讨厌它？想象一下，一位客户在电子商务中使用我们的“帮助”，并将其整天打开。 setInterval() 在这种情况下是令人讨厌的。

问题是我对平台运行的外部 Javascript 没有任何控制权，所以我需要一种方法来使用某种监听器来监听这个变量。

我能找到的最好的是这个Akira's answer但我无法使用它，因为这个变量不在我的控制范围内定义。

这就是我所做的:

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

您知道比 setInterval() 更好的方法吗？只是为了改进我的代码。

编辑:此变量位于脚本中，而不是 html 元素中

编辑 2: this link是比 setInterval() 更好的方法，基本上是改进的 setInterval() ，因为你可以告诉他要执行多少次迭代，这在客户端的情况下是可以的让平台整天保持开放状态，但是要使用它，我需要一些东西来检测客户端在页面上进行了一些事件，我需要什么？听众太棒了，回到原点

Answer 1

您可以尝试使用 Vue.js 框架。我创建了jsfiddle与示例代码。因此，Vue.js 框架自动检查和更新变量的想法。但是，它应该在您的“平台”对象中添加相应的代码。因此它可能会起作用或破坏某些功能。无论如何你都可以尝试，因为你需要做的就是写几行代码:-)

 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'
    });