23

I am fairly new to JavaScript, and I am learning it through p5 and videos by Daniel Shiffman.

I've been looking for a way to update a program every minute or so that checks a weather api, so I don't have to refresh the page myself.

I am aware that there are already answers to this question on here, but none of them make sense to me, as I am very new to JS.

So if you could answer it with an ELI5 ("Explain it like I'm five") description that would great.

tronerta
  • 432
  • 6
  • 12
Zelkins
  • 723
  • 1
  • 5
  • 22
  • 1
    Javascript timers would be a perfect choice here...Check setinterval and settimeout – Geeky Nov 21 '16 at 00:54
  • 4
    Have you read up on `setTimeout()` and `setInterval()`? – Pointy Nov 21 '16 at 00:54
  • See [*MDN: JavaScript timers*](https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Timers). – RobG Nov 21 '16 at 00:55
  • http://stackoverflow.com/help/how-to-ask - Try to write some code yourself and people will help you with it – user2182349 Nov 21 '16 at 00:59
  • You can use either `setTimeout` or `setInterval` based on your need as I explained the difference a bit below :-) – Aruna Nov 21 '16 at 01:19
  • 3
    @JaromandaX - user's profile calls out they're in high school. They're new to the site, new to the field. Find something better to do than bully people curious about our craft. 3+ people here said the same thing without being jerks - try to learn something from them. Don't be such a Diesel 10. – Richard JP Le Guen Nov 21 '16 at 01:20

4 Answers4

37

setInterval() is your easiest option.

Take a look at this simple example:

// Will execute myCallback every 0.5 seconds 
var intervalID = window.setInterval(myCallback, 500);

function myCallback() {
 // Your code here
}

More information and more examples can be found here: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)

sidewalksalsa
  • 875
  • 8
  • 14
14

In plain vanilla Javascript, you would use setInterval:

var intervalID = window.setInterval(checkWeatherAPI, 60000);

function checkWeatherAPI() {
  // go check API 
  console.log("checking weather API");
}

If you were to run the above, the callback function: checkWeatherAPI, would run once every minute, or 60,000 milliseconds forever, full documentation here: WindwTimers.setInterval

To stop the interval you would simply run this line:

window.clearInterval(intervalID);
Keno
  • 3,694
  • 2
  • 21
  • 40
4

Choosing whether setInterval OR setTimeout is based on your need and requirement as explained a bit about the difference below.

setInterval will be called irrespective of the time taken by the API. For an instance you set an API call every 5 seconds and your API call is taking 6 seconds due to the network latency or server latency, the below setInterval will trigger the second API call before the first API completes.

var timer = setInterval(callAPI, 5000);

function callAPI() {
  // TO DO
  triggerXhrRequest(function(success){

  });
}

Instead, if you want to trigger another API call after 5 seconds once the first API call completed, you can better use setTimeout as below.

var timer = setTimeout(callAPI, 5000);

function callAPI() {
  // TO DO
  triggerXhrRequest(function(success){
      timer = setTimeout(callAPI, 5000);
  });
}

setTimeout will be called once after nth seconds. So you can control when the next one can be called as above.

MDN Documentation

setTimeout

setInterval

Aruna
  • 11,959
  • 3
  • 28
  • 42
2
function doThings() {
   // The things I want to do (or increment)
}

setTimeout(doThings, 1000); // Milliseconds
Pyzard
  • 451
  • 3
  • 14
MrEhawk82
  • 811
  • 2
  • 13
  • 22