矢印キー付きの長いキーダウンの後にclearIntervalが機能しない

イメージを持つコンテナのsetIntervalとscrollLeftを使用すると、html-buttonでうまく動作します。矢印キー付きの長いキーダウンの後にclearIntervalが機能しない

次はキーボードの矢印キーを使用しますが、矢印キーを長押しすると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; 

     } 
    }); 

});

出典

2017-02-09 Ben

OK、私が間違っていたものを見つけました。 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; 
     } 
    }); 

});

出典

2017-02-09 15:40:35 Ben

矢印キー付きの長いキーダウンの後にclearIntervalが機能しない

答えて

関連する問題