如何延迟onkeydown事件

bhbhxy 2012-05-18 10:08:57
我想实现一个功能,当按下键盘上的下箭头时,能够将一个ul列表循环选中,以下是代码

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.current{background-color:#aecdee}
</style>
</head>
<body>
<input id="input" type="text">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>

<script type="text/javascript">
function $(id) {
return typeof id==="string" ? document.getElementById(id) : id;
}
(function() {
var input = $("input");
var list = $("ul").getElementsByTagName("li");
var index = -1;
function sIndex() {
index = index>=9 ? -1 : index+1;
return index;
}
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == 40) {
sIndex();
for(var i = 0,len=list.length; i<len; i++) {
list[i].className = i==index ? "current" : "";
}
}
};
})();
</script>
</body>
</html>


现在的问题是当我连续按着向下按键不放的时候,选项滚动得太快了,有什么方法可以延迟,比如间隔0.5秒再滚动到下一项。请问各位高手,应该如何修改上面的代码实现onkeydown的延迟?谢谢各位!
...全文
357 12 点赞 打赏 收藏 举报
写回复
12 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
bhbhxy 2012-05-18
[Quote=引用 8 楼 的回复:]

原理就是 定义两个时间,来比较时间差,如果很短的话,就表示长按,记录一个flag 来判断 onkeydown继续是否可用。


之前没看 楼主定义的utf-8,把我害惨了,一打中文注释就不能运行,

//100 ms
表示 两时间的 间隔,楼主可以自己设置
[/Quote]
实在太感谢了,这是一个困扰我很久的问题,第一次接触到这种解决方案,学习了~
  • 打赏
  • 举报
回复
001007009 2012-05-18
原理就是 定义两个时间,来比较时间差,如果很短的话,就表示长按,记录一个flag 来判断 onkeydown继续是否可用。


之前没看 楼主定义的utf-8,把我害惨了,一打中文注释就不能运行,

//100 ms
表示 两时间的 间隔,楼主可以自己设置
  • 打赏
  • 举报
回复
001007009 2012-05-18

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.current{background-color:#aecdee}
</style>
</head>
<body>
<input id="input" type="text">
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div id="test"></div>
<div id="test2"></div>
<script type="text/javascript">
function $(id) {
return typeof id==="string" ? document.getElementById(id) : id;
}
(function() {
var input = $("input");
var list = $("ul").getElementsByTagName("li");
var index = -1;
var time;
var flag = true;
function sIndex() {
index = index>=9 ? -1 : index+1;
return index;
}
document.onkeydown = function(e) {
if( flag ){
e = e || window.event;
var tmpTime = new Date;
var fn = function(x){
if(x){
flag = true;
return false;
}
if(e.keyCode == 40) {
sIndex();
for(var i = 0,len=list.length; i<len; i++) {
list[i].className = i==index ? "current" : "";
}
}

}
if(time && tmpTime - time < 100){ //100 ms
setTimeout(function(){
fn(true);
}, 500);
flag = false;
}else{
fn();
}
time = tmpTime;
}
};
})();
</script>
</body>
</html>

  • 打赏
  • 举报
回复
bhbhxy 2012-05-18
[Quote=引用 4 楼 的回复:]

setTimeout(function(){},500)
[/Quote]
能帮我把代码改改吗?谢谢了~现在我想只按一次的时候没有延迟,按住不放时才出现延迟。
  • 打赏
  • 举报
回复
bhbhxy 2012-05-18
[Quote=引用 2 楼 的回复:]

list[i].className = i==index ? "current" : "";
用setTimeout然后多一个变量来判断setTimeout执行完毕没。
同时也学习了你的简洁的编码风格和清晰的思路
[/Quote]
能不能实现如果只按一次向下按键然后放开立即转到下一项,按住不放的时候才出现延迟?
  • 打赏
  • 举报
回复
hch126163 2012-05-18
setTimeout(function(){},500)
  • 打赏
  • 举报
回复
浮华out 2012-05-18
楼主的这写法真独特啊,为什么不直接用jQuery呢?
  • 打赏
  • 举报
回复
licai1210 2012-05-18
list[i].className = i==index ? "current" : "";
用setTimeout然后多一个变量来判断setTimeout执行完毕没。
同时也学习了你的简洁的编码风格和清晰的思路
  • 打赏
  • 举报
回复
bhbhxy 2012-05-18
[Quote=引用 11 楼 的回复:]

楼主 结贴太早了,不知道有没有更好的方法。。。
[/Quote]
这个效果和hao123的智能搜索提示一样,但是百度的代码压缩了,抓不到……
  • 打赏
  • 举报
回复
001007009 2012-05-18
楼主 结贴太早了,不知道有没有更好的方法。。。
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2012-05-18 10:08
社区公告
暂无公告