Вопрос:

clearInterval не работает после длительного нажатия клавиши со стрелкой

jquery setinterval scrollto onkeyup clearinterval

122 просмотра

1 ответ

90 Репутация автора

Использование setInterval и scrollLeft для контейнера с изображениями хорошо работает с html-кнопками.

Далее я хочу использовать клавиши со стрелками на клавиатуре, но кажется, что когда вы нажимаете клавиши со стрелками слишком долго, clearInterval не работает.

Возможно, что-то происходит с интервалом и продолжительностью нажатия клавиш. Просто не могу понять почему. Любая помощь приветствуется. Вот скрипка .

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 Источник Размещён: 09.02.2017 12:09

Ответы (1)


2 плюса

90 Репутация автора

Решение

Хорошо, я узнал, что случилось. Keydown повторяется, в отличие от mousedown, поэтому setInterval устанавливается несколько раз при использовании keydown. Прошло немного времени, прежде чем начнутся повторы, поэтому предыдущий код сработал при коротком нажатии. На всякий случай, если кто-то захочет увидеть: 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;
        }
    });

});
Автор: Ben Размещён: 09.02.2017 03:40
Вопросы из категории :
32x32