如何延迟onkeydown事件

我想实现一个功能，当按下键盘上的下箭头时，能够将一个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的延迟？谢谢各位！

解决方案 »

  1.   

     list[i].className = i==index ? "current" : "";
    用setTimeout然后多一个变量来判断setTimeout执行完毕没。
    同时也学习了你的简洁的编码风格和清晰的思路
      

  2.   

    楼主的这写法真独特啊，为什么不直接用jQuery呢？
      

  3.   


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

  4.   

    原理就是 定义两个时间，来比较时间差，如果很短的话，就表示长按，记录一个flag 来判断 onkeydown继续是否可用。
    之前没看 楼主定义的utf-8，把我害惨了，一打中文注释就不能运行，//100 ms
    表示 两时间的 间隔，楼主可以自己设置
      

  5.   

    这个效果和hao123的智能搜索提示一样，但是百度的代码压缩了，抓不到……