Question

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

可以在以下位置找到滑块：

代码如下所示：

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

SetInterval Timeout - 变量结构重置超时

3 个答案: