怎么延迟onkeydown事件

2012-05-22

如何延迟onkeydown事件我想实现一个功能，当按下键盘上的下箭头时，能够将一个ul列表循环选中，以下是代码HTM

如何延迟onkeydown事件
我想实现一个功能，当按下键盘上的下箭头时，能够将一个ul列表循环选中，以下是代码

HTML code

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

[解决办法]
list[i].className = i==index ? "current" : "";
用setTimeout然后多一个变量来判断setTimeout执行完毕没。
同时也学习了你的简洁的编码风格和清晰的思路
[解决办法]
楼主的这写法真独特啊，为什么不直接用jQuery呢？
[解决办法]
setTimeout(function(){},500)
[解决办法]

HTML code

<!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>

热点排行

JavaScript

怎么延迟onkeydown事件