JS: Can I increment a var inside a function() that gets called through setInterval()?

Question

I have a function change_background() that I call from document.onload through a setInterval( change_background(), 5000 ); to change the background of my heading every 5sec's.

Where I'm stuck in writing my function is: How can I increment my num var every time its called?

function change_background(){

  var element = document.getElementsByClassName('top');
  element[0].style.backgroundImage = 'url( "media/image' + num + '.jpg" )';

 //when num gets greater than the amount of images
 if( num > 2 ){
   num = 0;
 }

}//end change_background()

I'm just messing around trying to achieve this effect. Is this even possible the way I'm doing it, am I going the wrong way about it?

as a note your code: `setInterval( change_background(), 5000 );` should be `setInterval( change_background, 5000 );` as you want `setInterval` to invoke your function `change_background` every X milliseconds. — Sgnl, Jan 12 '17 at 01:46
Might be an idea to try and get the images cached as well prior to changing - also reading up on js variable scoping may be beneficial - http://stackoverflow.com/a/500459/5302749 has some great info — Brian, Jan 12 '17 at 01:51

score 1 · Accepted Answer · answered Jan 12 '17 at 01:46

Try this:

var num = 0; // declaration
function change_background(){

  var element = document.getElementsByClassName('top');
  element[0].style.backgroundImage = 'url( "media/image' + num + '.jpg" )';
  num++;
  //when num gets greater than the amount of images
  if( num > 2 ){
    num = 0;
  }

}//end change_background()

score 0 · Answer 2 · answered Jan 12 '17 at 01:45

0

Yeah. It is possible. and you can have this to increment your num.

  element[0].style.backgroundImage = 'url( "media/image' + (num++) + '.jpg" )';

answered Jan 12 '17 at 01:45

Chinito

1,085
1
9
11

score 0 · Answer 3 · edited Jan 12 '17 at 23:58

Yes, It can, but that variable should be in the same context than setInterval, something like this:

b = {a :1}; setTimeout(function(){ b.a++; console.log(b)}, 1000)

if you want to call a function, then num need to be global that way the function will be available to access the variable.

This will fail as incrementB cannot access the variable b:

function incrementB() { return b++; } 
function someFunc() { var b = 3; } 
setInterval( incrementB, 500 );

This will work because b is global (but try to avoid this):

var b = 0;
function incrementB() { return b++; } 
function setValueToB() { b = 3; } 
setInterval( incrementB, 500 );

Sgnl · Answer 4 · 2017-01-12T02:00:44.560

This would be my attempt as I like to avoid global variables. This keeps the counter num in a closure which is accessible to the function returned by change_background.

function change_background(){
  let num = 0;

  return function() {
    var element = document.getElementsByClassName('top');
    element[0].style.backgroundImage = 'url( "media/image' + num + '.jpg" )';

    num += 1; // or num++ or whatever sauce you like

    //when num gets greater than the amount of images
    if( num > 2 ){
      num = 0;
    }
  }
}

setInterval(change_background(), 5000);

JS: Can I increment a var inside a function() that gets called through setInterval()?

4 Answers4