Question

我有两个按钮，批准（可见）和撤消（不可见）。单击批准隐藏按钮并显示撤消按钮（表示故障安全）。单击批准设置20秒延迟，如果实现，将提交表单。但是我希望取消批准按钮取消延迟。如果不完全删除表单上的事件处理程序，我该如何做到最好呢？

$("button.approve").on('click', function(e){
            $(this).hide();
            $(this).siblings('button.undo').show();
            $(this).siblings("form.update-comment.approve").delay(20000).trigger('submit');
        });

        $("button.undo").on('click', function(e){
            $(this).hide();
            $(this).siblings('button.approve').show();
            $(this).siblings("form.update-comment.approve").off('submit');
        });

Answer 1

你看到documentation中的黄色方框了吗？

.delay()方法最适合延迟排队的jQuery效果。因为它是有限的 - 它没有，例如，提供一种取消延迟的方法 - .delay()不能替代JavaScript的原生setTimeout函数，可能更适合某些用例。

使用setTimeout代替

var approveTimeout;
$("button.approve").on('click', function(e){
    var self = $(this);
    self.hide().siblings('button.undo').show();
    approveTimeout = setTimeout(function(){
        self.siblings("form.update-comment.approve").trigger('submit');
    }, 20000);
});

$("button.undo").on('click', function(e){
    $(this).hide().siblings('button.approve').show();
    clearTimeout( approveTimeout  );
});

Answer 2

您可以使用setTimeout和clearTimeout：

执行此操作

function onSubmit(form) {
    form.submit();
};

var delayedSubmit = null;

$("button.approve").on('click', function(e){
    $(this).hide();
    $(this).siblings('button.undo').show();
    var thisForm = $(this).siblings("form.update-comment.approve");
    delayedSubmit = setTimeout(function() {
        onSubmit( thisForm );
    }, 2000);
});

$("button.undo").on('click', function(e){
    $(this).hide();
    $(this).siblings('button.approve').show();
    clearTimeout( delayedSubmit );
});

Answer 3

尝试

var form = $("form.update-comment.approve")
, approve = $("button.approve")
, undo = $("button.undo");

form.on("submit.approved", function (e) {
    // do stuff
    undo.trigger("click", ["reset"])
});

approve.on('click', function (e) {
    approve.hide();
    undo.show();
    form
    .delay(20000, "approval")
    .queue("approval", function () {
        form.trigger('submit.approved');
    }).dequeue("approval");
});

undo.hide().on('click', function (e, reset) {
    form
    .queue("approval", []);
    undo.hide();
    approve.show();
    console.log(reset || "cancelled");  
});

请参阅.delay()，.queue()

＆＃13;

var form = $("form.update-comment.approve")
, approve = $("button.approve")
, undo = $("button.undo");

form.on("submit.approved", function (e) {
    e.preventDefault();
    e.stopPropagation();
    alert(e.namespace);
    undo.trigger("click", ["reset"])
});

approve.on('click', function (e) {
    approve.hide();
    undo.show();
    form
    .delay(20000, "approval")
    .queue("approval", function () {
        form.trigger('submit.approved');
    }).dequeue("approval");
});

undo.hide().on('click', function (e, reset) {
    form
    // clear queue
    .queue("approval", []);
    undo.hide();
    approve.show();
    console.log(reset || "cancelled");  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form method="POST" class="update-comment approve"></form>
<button class="approve">approve</button>
<button class="undo">undo</button>

＆＃13;

如何使用delay（）清除事件调用集

3 个答案: