화살표 키로 더 긴 keydown을 수행 한 후에 clearInterval이 작동하지 않습니다.

이미지가있는 컨테이너의 setInterval 및 scrollLeft 사용은 html 버튼과 잘 작동합니다.화살표 키로 더 긴 keydown을 수행 한 후에 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과 반대로 반복되므로 keydown을 사용할 때 setInterval은 두 번 이상 설정됩니다. 반복이 시작되기 전에 잠시 시간이 걸리므로 바로 이전 코드가 눌려진 것입니다. 혹시 누가보고 싶다면 : 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이 작동하지 않습니다.

답변

관련 문제