如何延迟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的延迟？谢谢各位！

...全文

533 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

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]
能不能实现如果只按一次向下按键然后放开立即转到下一项，按住不放的时候才出现延迟？