clearInterval funktioniert nicht nach längerer Tastenfolge mit Pfeiltaste

Die Verwendung von setInterval und scrollLeft für einen Container mit Bildern funktioniert gut mit HTML-Schaltflächen.clearInterval funktioniert nicht nach längerer Tastenfolge mit Pfeiltaste

Als nächstes möchte ich die Pfeiltasten der Tastatur verwenden, aber es scheint, dass der ClearInterval nicht funktioniert, wenn Sie die Pfeiltasten zu lang drücken.

Es kann etwas mit dem Intervall und der Dauer des Keydowns passieren. Kann einfach nicht herausfinden, warum. Jede Hilfe würde sehr geschätzt werden. Hier ist ein 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; 

     } 
    }); 

});

Quelle

2017-02-09 Ben

OK, fand ich heraus, was falsch war. Keydown wiederholt sich, im Gegensatz zu mousedown, also wird setInterval mehr als einmal gesetzt, wenn Keydown verwendet wird. Es dauert eine kurze Zeit, bevor die Wiederholungen beginnen, deshalb hat der vorherige Code funktioniert, wenn er kurz gedrückt wurde. Nur für den Fall, dass jemand sehen möchte: fiddle. Danke fürs Lesen sowieso.

Verbesserte 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; 
     } 
    }); 

});

Quelle

2017-02-09 15:40:35 Ben

clearInterval funktioniert nicht nach längerer Tastenfolge mit Pfeiltaste

Antwort

Verwandte Themen