怎么延迟onkeydown事件-JavaSript-爱易网页

怎么延迟onkeydown事件

日期：2014-05-16　浏览次数：20341 次

如何延迟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 = t

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么延迟onkeydown事件

相关资料更多>

推荐阅读更多>