javascript - 如果我单击按钮，我的 keydown 事件会运行太多次

Question

$(document).keydown(function(e) {
      if(e.keyCode == 37) { // left
            e.preventDefault();
            $("#news_container_inner").animate({
                // zuun
                left: (int_px($("#news_container_inner").css("left")) + 945) > 0 ? MAX_LENGTH : "+=945"
            });
            $('#dragBar').animate({
                left: (int_px($("#dragBar").css("left")) - dragBar_road) < 0 ? MAX_LENGTH_Drag+1 : "-="+dragBar_road
            });
            console.log('left');
      }
      else if(e.keyCode == 39) { // right
        e.preventDefault();
        $("#news_container_inner").animate({
          // baruun
          left: (int_px($("#news_container_inner").css("left")) - 945) < MAX_LENGTH ? 0 : "-=945"
        });
        $('#dragBar').animate({
            left: (int_px($("#dragBar").css("left")) + dragBar_road) > MAX_LENGTH_Drag+1 ? 1 : "+="+dragBar_road
        });
        console.log('right');
      }
    });

这是我的代码。问题是，如果我单击右箭头按钮 1 秒，此事件将运行 35 次。如果我点击1秒，我需要绑定(bind)3或4次。 抱歉英语不好。 请帮助我。

Answer 1

如果你只是想触发它，你可以使用计数器，例如4次:

var counter = 0;

$(document).on('keydown', function(e) {
    e.preventDefault();
    counter++;

    if(counter > 4) {
        return;
    }

    if(e.keyCode == 37) { 
        console.log('left');
    } else if(e.keyCode == 39) {      
        console.log('right');
    }

}).on('keyup', function(e) {
    counter = 0;
});

DEMO

编辑

如果您想限制每秒的事件数量，可以使用setInterval:

var counter = 0,
    intervalInited = false;

function initInterval() { 
    intervalInited = true;

    setInterval(function(){
        if(counter > 4) {
            counter = 0;
        }
    }, 1000);
}

$(document).on('keydown', function(e) {
    e.preventDefault();
    counter++;

    if(counter > 4) {
        if(!intervalInited) {
            initInterval();
        }
        return;
    }

    if(e.keyCode == 37) { 
        console.log('left');
    } else if(e.keyCode == 39) {      
        console.log('right');
    }

}).on('keyup', function(e) {
    counter = 0;
});

DEMO