SetInterval Timeout - Variable Structure reset timeout

Question

I am setting a timeout to reset the timeout interval on a click event on a simple Javascript coded slider.

The slider can be found at:

http://rastastation.com/rastaradio.html

The code appears as follows in the section:

---

  <script type = "text/javascript">
      function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);
          window.clearInterval(this.image);

      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);
          window.clearInterval(this.image);           

      }

      function startTimer() {
          setInterval(displayNextImage, 9000);
      }


      var images = [], x = -1;
      images[0] = "images/carousel_anthonyb2.png";
      images[1] = "images/carousel_capleton2.png";
      images[2] = "images/carousel_sizzla2.png";
      images[3] = "images/carousel_earlsixteen.png";
      images[4] = "images/carousel_norrisreid.png";
      images[5] = "images/carousel_yamibolo2.png";
      images[6] = "images/carousel_fantanmojah2.png";
      images[7] = "images/carousel_natural_black2.png";
      images[8] = "images/carousel_admiraltibet.png";
      images[9] = "images/carousel_luciano.png"; 
  </script>

---

I need the click event to reset the timeout and particularly set the Internal Variable.

As shown by W3Schools, it appears as follows:

---

window.clearInterval(intervalVariable)

---

How would I easily go about doing this.

The slider works and I am adding advanced functionality. This is where I am after 30 minutes of customizing it.

Tag as follows:

<div id="rgStateSLIDER">
<img id="img" src="images/carousel_start.png">
<div id="containerSliderControls">
<div class="buttonPrevious" onclick="displayPreviousImage()"></div>
<div class="buttonNext" onclick="displayNextImage()"></div>
</div>

Thanks...William

UI Developer - Basis Interactive Inc.

Answer 1

try this code, it may help you solving your problem.

<script type = "text/javascript">
      function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;

         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function displayThisImage( ) {
          x = (x == images.length - 1) ? 0 : x + 1; 
          displayImage(images[x]);
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function startTimer() {
         timer =    setInterval( displayThisImage, 5000 );
      }


      var images = [], x = -1;
      var timer ;
      images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      images[1] = "http://rastastation.com/images/carousel_capleton2.png";
      images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
      images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
  </script>

Answer 2

The "Internal Variable" (I think you mean interval variable) is returned by the call to setTimeout:

function startTimer() {
    setInterval(displayNextImage, 9000);
}

but you don't assign it to anything, so it's lost. Given your current design, you should create a global called (say) timerInterval. Then have a new function clearTimer:

function clearTimer() {

    // Only clear it if it's been set
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
}

And in any function that sets the interval, make sure you clear it first (otherwise you'll start multiple timers):

function startTimer() {

    // Make sure there's no timer running
    clearTimer();

    // Keep the value
    timerInterval = setInterval(displayNextImage, 9000);
}

And in the other functions, re–use the startTimer function:

  function displayNextImage() {
      x = ++x % 12;
      displayImage(images[x]);
      startTimer();
  }

and do the same for the other functions, e.g.

function displayPreviousImage() {
    x = (x || images.length) - 1;
    displayImage(images[x]);
    startTimer();
}

Untested, but you should get the idea.

You should look to contain the global variables in closures so that they remain private, particularly when you are using names that are easily confused with other variables and properties (e.g. document.images).

Answer 3

Try this code i used your code for sample

<script type = "text/javascript">
  var timer = null;

  function displayImage(image) {
      document.getElementById("img").src = image;
  }

  function displayNextImage() {
      x = (x == images.length - 1) ? 0 : x + 1;
      displayImage(images[x]);
      // window.clearInterval(this.image); // old code
      window.clearInterval(timer); // new code       
  }

  function displayPreviousImage() {
      x = (x <= 0) ? images.length - 1 : x - 1;
      displayImage(images[x]);
      // window.clearInterval(this.image); // old code
      window.clearInterval(timer); // new code        

  }

  function startTimer() {
      timer = setInterval(displayNextImage, 9000);
  }

  function stopTimer() {
      clearInterval(timer);
  }


  var images = [], x = -1;
  images[0] = "images/carousel_anthonyb2.png";
  images[1] = "images/carousel_capleton2.png";
  images[2] = "images/carousel_sizzla2.png";
  images[3] = "images/carousel_earlsixteen.png";
  images[4] = "images/carousel_norrisreid.png";
  images[5] = "images/carousel_yamibolo2.png";
  images[6] = "images/carousel_fantanmojah2.png";
  images[7] = "images/carousel_natural_black2.png";
  images[8] = "images/carousel_admiraltibet.png";
  images[9] = "images/carousel_luciano.png";