每当我的js数据文件发生变化时如何刷新页面

Question

So I've got this local file named 'data.js' containing various data.

  var json={ 'city': 'madrid', 'zip':'21212', 'street':'bergstrasse', 'house':'15', }; for(key in json) { if(json.hasOwnProperty(key)) $('input[name='+key+']').val(json[key]); } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <form action="options.php" method="post" > <input type="text" name="city" placeholder="stadt" > <br> <input type="text" name="zip" placeholder="zip" > <br> <input type="text" name="street" placeholder="straße" > <br> <input type="text" name="house" placeholder="hausnummer" > <br> <input type="submit" value="speichern" name="saves"></input> </form> <script src="data.js"></script> 

I want to refresh my page only when some data in the js file changes. Appreciate your help if you can explain me with bit of code. I searched all over internet, I couldnt find appropriate answer.

Answer 1

Let's break this down. You want to:

• check something periodically
• the thing you want to check is a remote file
• IF it has changed you want to take an action

As mentioned in the comments, there are ways to do all of the above in Javascript.

First let's address checking something periodically: you can either use a recursive setTimeout loop, or setInterval :

function waitOneSecond = function() {
    setTimeout(function() {
        check(); // will get to this in a second
        waitOneSecond();
    }, 1000); // 1000 = one second
});

function checkEverySecond() {
    setInterval(function() {
        check();
    }, 1000); // 1000 = one second

Next, we need a way to check whether the file changed. The actual "did it change part" is up to you (you might want to consider using a function like Underscore or Lodash's _.isEqual for it), but to do that you'll need to get the latest version of the JSON file. Luckily jQuery has a method for doing exactly that: getJSON :

function check() {
    $.getJson('http://yourserver.com/data.js').done(function(json) {
        if (didChange(json)) {// use _.isEqual to write your didChange
            takeAction();
        }
    });
}

As you can see this last example also covers taking action, but again I'll leave the definition of the takeAction function to you.