javascript - 当我们使用 JavaScript 单击下一个或上一个按钮时，图像幻灯片计时器速度会增加

Question

我使用 JavaScript 编写了简单的图像 slider 。我设置了 5000 毫秒计时器来自动滑动。但当我们单击下一个或上一个按钮时，它会增加。我已经粘贴了下面的代码

HTML 代码:

    <section id="intro">
        <div id="prev"><br/><br/><br/><br/><img onclick="rotateImages(0);" src="./images/slider/prev1.png"/></div>
        <div id="next"><img onclick="rotateImages(1);" src="./images/slider/next1.png"/></div>
    </section>

JavaScript 代码:

    <script type="text/javascript">

        var num = 0;
        var temp = 0;
        var speed = 5000;
        var preloads = [];

        preload(
                '1.png',
                '2.jpg',
                '3.jpg',
                '4.jpg',
                '5.png'
                );

        function preload() {

            for (var c = 0; c < arguments.length; c++) {
                preloads[preloads.length] = new Image();
                preloads[preloads.length - 1].src = arguments[c];
            }
        }

        function rotateImages(flag) {
            if (flag == 0)
            {
                num = num - 1;
                if (num < 0)
                    num = preloads.length;
            }
            else
            {
                num = num + 1;
                if (num >= preloads.length)
                    num = 0;
            }
            if (num == temp) {
                rotateImages(1);
            } else {
                var str = preloads[num].src;
                var resArr = str.split("/");
                var picName = resArr[resArr.length - 1];
                document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
                temp = num;
                setTimeout(function () {
                    rotateImages(1)
                }, speed);
            }
        }

        if (window.addEventListener) {
            window.addEventListener('load', function () {
                setTimeout(function () {
                    rotateImages(1)
                }, speed)
            }, false);
        } else {
            if (window.attachEvent) {
                window.attachEvent('onload', function () {
                    setTimeout(function () {
                        rotateImages(1)
                    }, speed)
                });
            }
        }
    </script>

Answer 1

您需要清除之前的计时器。否则，每次调用rotateImages()时都会添加新的计时器，保存从setTimeout()返回的引用，然后使用clearTimeout()清除计时器(如果已设置)

var num = 0;
var temp = 0;
var speed = 5000;
var preloads = [];
var timeout;

preload(
  '1.png',
  '2.jpg',
  '3.jpg',
  '4.jpg',
  '5.png'
);

function preload() {

  for (var c = 0; c < arguments.length; c++) {
    preloads[preloads.length] = new Image();
    preloads[preloads.length - 1].src = arguments[c];
  }
}

function rotateImages(flag) {
  if (flag == 0) {
    num = num - 1;
    if (num < 0)
      num = preloads.length;
  } else {
    num = num + 1;
    if (num >= preloads.length)
      num = 0;
  }
  if (num == temp) {
    rotateImages(1);
  } else {
    var str = preloads[num].src;
    var resArr = str.split("/");
    var picName = resArr[resArr.length - 1];
    document.getElementById("intro").style.backgroundImage = 'url(./images/slider/' + picName + ')';
    temp = num;

    if (!!timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      rotateImages(1);
    }, speed);
  }
}

if (window.addEventListener) {
  window.addEventListener('load', function() {
    setTimeout(function() {
      rotateImages(1)
    }, speed)
  }, false);
} else {
  if (window.attachEvent) {
    window.attachEvent('onload', function() {
      setTimeout(function() {
        rotateImages(1)
      }, speed)
    });
  }
}