SetInterval超时-可变结构重置超时

Question

我正在设置一个超时，以重置简单Javascript编码滑块上的click事件的超时间隔。

滑块位于：

http://rastastation.com/rastaradio.html

代码在部分中显示如下：

---

  <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>

---

我需要click事件来重置超时，尤其是设置内部变量。

如W3Schools所示，它显示如下：

---

window.clearInterval(intervalVariable)

---

我将如何轻松地做到这一点。

滑块有效，我要添加高级功能。 自定义30分钟后，我就在这里。

标记如下：

<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>

谢谢...威廉

UI开发人员-Basis Interactive Inc.

Answer 1

通过调用setTimeout返回“内部变量”（我认为您是指区间变量）：

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

但是您没有将其分配给任何东西，因此丢失了。 根据当前的设计，您应该创建一个名为（例如） timerInterval的全局变量 。 然后有一个新的函数clearTimer ：

function clearTimer() {

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

在设置间隔的任何函数中，请确保先清除它（否则将启动多个计时器）：

function startTimer() {

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

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

在其他函数中，重新使用startTimer函数：

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

并针对其他功能执行相同的操作，例如

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

未经测试，但是您应该知道。

您应该将全局变量包含在闭包中，以使它们保持私有状态，尤其是当您使用易于与其他变量和属性（例如document.images）混淆的名称时。

Answer 2

试试此代码，它可以帮助您解决问题。

<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 3

试试这个代码我用你的代码作为示例

<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";