clearInterval 在使用箭头键更长的按键后不起作用

Question

对带有图像的容器使用 setInterval 和 scrollLeft 与 html-按钮配合使用效果很好。

接下来我想使用键盘箭头键，但似乎当您按箭头键太久时，clearInterval 不起作用。

按键的间隔和持续时间可能有问题。只是想不通为什么。任何帮助将非常感激。这是 fiddle.

HTML:

<html>
<head>
<title>scrollTo</title>
</head>
<body>
<div class="img-row">
  <div class="img-row-scroller">
    <div class="img-row-inner">
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
      <div class="img"></div>
    </div>
  </div>
  <div class="scroll-left"></div>
  <div class="scroll-right"></div>
</div>
</body>
</html>

CSS:

.img-row {
    position: relative;
    width: 700px;
    margin: 0 15px 45px 0;
}
.img-row-scroller {
    position: relative;
    width: 100%;
    height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.img-row-inner {
    position: relative;
    width: 100%;
    height: 200px;
}
.img {
    width: 400px;
    height: 200px;
    border: 1px solid black;
    display: inline-block;

}
.scroll-left, .scroll-right {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: aqua;
    top: calc(50% - 40px);
    display: block;
    z-index: 9999;
}
.scroll-left {
    left: 0px;
}
.scroll-right {
    right: 0px;
}

JS:

$(document).ready(function () {
    "use strict";
    var imgRow = $(".img-row-scroller");
    var scrollBtnLeft = $(".scroll-left");
    var scrollBtnRight = $(".scroll-right");
    var timerLeft;
    var timerRight;
    var timerArrowLeft;
    var timerArrowRight;
    var scrollAmount = 12;
    var scrollTime = 20;

    /********** Buttons **********/
    scrollBtnLeft.mousedown(function () {
        timerLeft = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos - scrollAmount);
        }, scrollTime);
    });
    scrollBtnLeft.mouseup(function () {
        clearInterval(timerLeft);
    });
    scrollBtnRight.mousedown(function () {
        timerRight = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos + scrollAmount);
        }, scrollTime);
    });
    scrollBtnRight.mouseup(function () {
        clearInterval(timerRight);
    });
    $(document).mouseup(function () {
        clearInterval(timerLeft);
        clearInterval(timerRight);
    });

    /********** Keys **********/
    $(document).on('keydown', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                //clearInterval(timerArrowLeft);
                timerArrowLeft = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos - scrollAmount);
                }, scrollTime);
                break;

            case 39:
                //clearInterval(timerArrowRight);
                timerArrowRight = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos + scrollAmount);
                    console.log("scrolling");
                }, scrollTime);
                break;

            default:
                return;
        }
        e.preventDefault();
    });

    $(document).on('keyup', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                clearInterval(timerArrowLeft);
                break;

            case 39:
                clearInterval(timerArrowRight);
                console.log("keyup");
                break;

        }
    });

});

Answer 1

好的，我发现出了什么问题。 keydown 重复，与 mousedown 相反，所以使用 keydown 时 setInterval 被设置了不止一次。在重复开始之前需要很短的时间，这就是为什么之前的代码在短时间按下时确实起作用的原因。以防万一有人想看：fiddle。无论如何感谢阅读。

改进的 JS：

$(document).ready(function () {
    "use strict";
    var imgRow = $(".img-row-scroller");
    var scrollBtnLeft = $(".scroll-left");
    var scrollBtnRight = $(".scroll-right");
    var timerLeft;
    var timerRight;
    var timerArrowLeft = false;
    var timerArrowRight = false;
    var scrollAmount = 12;
    var scrollTime = 20;

    /********** Buttons **********/
    scrollBtnLeft.mousedown(function () {
        timerLeft = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos - scrollAmount);
        }, scrollTime);
    });
    scrollBtnLeft.mouseup(function () {
        clearInterval(timerLeft);
    });
    scrollBtnRight.mousedown(function () {
        timerRight = setInterval(function () {
            var leftPos = imgRow.scrollLeft();
            imgRow.scrollLeft(leftPos + scrollAmount);
        }, scrollTime);
    });
    scrollBtnRight.mouseup(function () {
        clearInterval(timerRight);
    });
    $(document).mouseup(function () {
        clearInterval(timerLeft);
        clearInterval(timerRight);
    });

    /********** Keys **********/
    $(document).on('keydown', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                if(timerArrowLeft){
                    return;
                }   
                timerArrowLeft = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos - scrollAmount);
                }, scrollTime);
                break;

            case 39:
                if(timerArrowRight){
                    return;
                }                   
                timerArrowRight = setInterval(function () {
                    var leftPos = imgRow.scrollLeft();
                    imgRow.scrollLeft(leftPos + scrollAmount);
                    console.log("scrolling");
                }, scrollTime);
                break;

            default:
                return;
        }
        e.preventDefault();
    });

    $(document).on('keyup', function (e) {
        switch ((e.keyCode ? e.keyCode : e.which)) {
            case 37:
                clearInterval(timerArrowLeft);
                timerArrowLeft = false;
                break;

            case 39:
                clearInterval(timerArrowRight);
                timerArrowRight = false;
                console.log("keyup");
                break;

            default:
                return;
        }
    });

});

clearInterval 在使用箭头键更长的按键后不起作用

clearInterval not working after longer keydown with arrow key

jquery

setinterval

scrollto

onkeyup

clearinterval