Question

我创建了两个函数。为了简单起见，我们举一个例子：

我让函数为相同的对象触发不同的事件。您可以使用keyboard arrows

激活它们

$("body").keydown(function(e) {
    if (event.which == 39) open_second_layer();
});
$("body").keydown(function(e) {
    if (event.which == 37) open_first_layer();
});

一旦我触发了一个功能并再次按下同一个键，它就会再次触发动画（不必要）。

因此，只要触发了函数open_second_layer，就不能再次触发它，直到再次触发open_first_layer为止。反过来也是如此。

我发现.bind和.when是可能的解决方案，但无法弄清楚如何以正确的方式使用它们。我很感激谷歌的每一个建议或关键词。

Answer 1

将另一个函数放在slide_first中，如：

function slide_first(){
  // other code
  $('#activate_second').one('click', slide_second);
}
$('#activate_first').one('click', slide_first);

或使用匿名函数执行相同的操作：

$('#activate_first').one('click', function(){
  // slide_first code here
  $('#activate_second').one('click', function(){
    // slide_second code here
  });
});

也许你真的想要：

function recursiveSlider(){
  $('#activate_first').one('click', function(){
    // slide_first code here
    $('#activate_second').one('click', function(){
      // slide_second code here
      recursiveSlider();
    });
  });
}
recursiveSlider();

Answer 2

您可以使用jQuery＆＃39; one()。

在第一个单击处理程序中，绑定第二个。

在第二个单击处理程序中，绑定第一个。

sample

<div id=activate-first>first</div>
<div id=activate-second style="display:none;">second</div>

$(document).ready(function () {
    function slide_first(){
        $('#activate-first').show();
        $('#activate-second').hide();
        $('#activate-second').one('click', slide_first);
    };

    function slide_second(){
        $('#activate-first').hide();
        $('#activate-second').show();
        $('#activate-first').one('click', slide_second);
    };

    $('#activate-first').one('click', slide_second);
    $('#activate-second').one('click', slide_first);
});

Answer 3

您可以保留状态变量并跟踪对其进行更改的时间：

var state_changed = (function() {
    var current = null;

    return function(state) {
        if (state == current) {
            return false;
        }
        current = state;
        return true;
    };
}());

function open_first_layer()
{
    if (!state_changed(1)) {
        return;
    }
    // rest of code
}

function open_second_layer()
{
    if (!state_changed(2)) {
      return;
    }
    // rest of code
}

$("body").keydown(function(e) {
    if (event.which == 39) {
        open_second_layer();
    } else if (event.which == 37) {
        open_first_layer();
    }
});

Answer 4

这是授权的完美用例。您只需单击一次，即可在事件发生时确定已点击的内容，并采取相应的操作：

$(document.body).on("click", function(ev) {
    var $targ = $(ev.target);

    if ($targ.is('#button_1')) {
        // someone clicked #button_1
    }

    if ($targ.is('.page-2 *')) {
        // something inside of .page-2 was clicked!!
    }
});

更新：现在OP已包含更多代码，我不确定问题是什么 - 没有必要绑定和取消绑定事件......

http://jsfiddle.net/ryanwheale/uh63rzbp/1/

function open_first_layer() {
    $('#first_panel').addClass('active');
    $('#second_panel').removeClass('active');
}

function open_second_layer() {
    $('#first_panel').removeClass('active');
    $('#second_panel').addClass('active');
}

// one event === good
$("body").keydown(function(e) {
    if (event.which == 39) open_second_layer();
    if (event.which == 37) open_first_layer();
});

...或者如果您正在尝试构建滑块，我建议您更改命名约定：

http://jsfiddle.net/ryanwheale/uh63rzbp/2/

var current_layer = 1,
    $all_layers = $('[id^="panel_"]'),
    total_layers = $all_layers.length;

function move_layer (dir) {
    current_layer += dir; 
    if (current_layer < 1) current_layer = total_layers;
    else if (current_layer > total_layers) current_layer = 1;

    $all_layers.removeClass('active');
    $('#panel_' + current_layer).addClass('active');
}

// one event === good
$("body").keydown(function(e) {
    if (event.which == 39) move_layer(1);
    if (event.which == 37) move_layer(-1);
});

move_layer(0);

如果另一个已经被解雇，则仅起火一次

4 个答案: