使用箭頭鍵加長keydown後，clearInterval不起作用

對具有圖像的容器使用setInterval和scrollLeft與html-按鈕配合良好。使用箭頭鍵加長keydown後，clearInterval不起作用

接下來我想使用鍵盤箭頭鍵，但似乎當按下箭頭鍵太長時，clearInterval不起作用。

keydown的間隔和持續時間可能會有所變化。只是無法找出原因。任何幫助將非常感激。這是一個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

使用箭頭鍵加長keydown後，clearInterval不起作用

回答

相關問題