clearInterval not working after longer keydown with arrow key

Question

Using setInterval and scrollLeft for a container with images works well with html-buttons.

Next i want to use the keyboard arrow-keys but it seems that when you press the arrow-keys too long, the clearInterval doesn't work.

There might be something going on with the interval and the duration of the keydown. Just can't figger out why. Any help would be much appreciated. Here's a 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;

        }
    });

});

Ben · Accepted Answer · 2017-02-10T09:45:11.300

OK, i found out what was wrong. Keydown repeats, contrary to mousedown, so the setInterval is set more than once when using keydown. It takes a short while before the repeats begin, that's why the previous code did work when pressed shortly. Just in case anyone would like to see: fiddle. Thanks for reading anyway.

Improved 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 not working after longer keydown with arrow key

1 Answers1