1

There is this ecommerce platform that uses a lot of ajax. In the backoffice order section there are two possibilities: order list page and detail order page. The url doesn't change, it would be easy if it did to tell in which page i am but it is not the case.

This platform use ajax to assign to a variable some value, with this value I can tell in my code in which page I am, the best I could do is use setInterval() to get the change in this variable. I hate using setInterval() so I am looking into alternatives.

Why do i hate it? Imagine a client that uses our "help" in this ecommerce and leave it open all day. setInterval() is hateful in this situations.

The thing is that I don't have any control in this external Javascript that the platform runs so I need a way to use some kind of listener to this variable.

The best I could find is this Akira's answer but I can't use it because this variable is not in my control to define.

This is what I did:

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

Do you know a better way to do it than setInterval()? Just to improve my code.

Edit: this variable is in a script, not in an html element

Edit 2: this link is somewhat a better way than setInterval(), basically an improved setInterval() because you can tell him how many iterations to do, and this is okay in the case the client leave open the platform all day long, but to use it I need something to detect the client did some activity on the page, what do I need for this? A listener soooo, back to square one

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
iscato
  • 15
  • 6

3 Answers3

0

You can try to use Vue.js framework for that. I have created the jsfiddle with the sample code. So, the idea that Vue.js framework automaticaly check and update the variables. BUT, it should add the code for that in your 'platform' objects. So it may work or make broke some functionality. Anyway you can try becouse all you need to do is write few lines of code:-)

 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'
    });
Andriy Markov
  • 11
  • 1
  • sorry but we can't use Vue.js in our application, just plain Javascript. – iscato Feb 10 '17 at 15:50
  • The thing is that we can not access to the code of that external javascript and we need to process some information depending on the value of that variable, i repeat javascript variable, not element in the DOM – iscato Feb 13 '17 at 06:10
0

in addition to the setInterval answer above, I created a tiny lib called forTheWatch.js, that use the same way to catch and callback for changes in normal global variables in javascript.

Compatible with jquery variables, no need to use objects, and you can pass directly an array of several variables if needed.

If it can be helpful... : https://bitbucket.org/esabora/forthewatch
Basically you just have to call the function :
watchIt("theVariableToWatch", "varChangedFunctionCallback");
and sorry by advance if not relevant...

Soufiane Benrazzouk
  • 35
  • 3
-1

SuperNovas's answer edited by alex is one thing we can work on to detect activity on our page and set a time to the setInterval(). Is not the cleanest of the answers to come up with but it's something, i mark the thread as resolved until someone give a better answer. Thanks.

Community
  • 1
  • 1
iscato
  • 15
  • 6