clearInterval 在使用箭头键更长的按键后不起作用
clearInterval not working after longer keydown with arrow key
对带有图像的容器使用 setInterval 和 scrollLeft 与 html-按钮配合使用效果很好。
接下来我想使用键盘箭头键,但似乎当您按箭头键太久时,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;
}
});
});
好的,我发现出了什么问题。 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;
}
});
});
对带有图像的容器使用 setInterval 和 scrollLeft 与 html-按钮配合使用效果很好。
接下来我想使用键盘箭头键,但似乎当您按箭头键太久时,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;
}
});
});
好的,我发现出了什么问题。 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;
}
});
});