如何使用 delay() 清除事件调用集

Posted 2023-05-08

【中文标题】如何使用 delay() 清除事件调用集

【英文标题】：How do I clear an event call set using delay()

【发布时间】：2015-01-20 22:20:25

【问题描述】：

我有两个按钮，批准（可见）和撤消（不可见）。单击批准隐藏按钮并显示撤消按钮（意味着故障安全）。单击批准设置 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');
        );

【问题讨论】：

可能重复：***.com/questions/7929266/jquery-delay-how-to-stop-it

delay 适用于效果和动画，不适用于 trigger 函数。

【参考方案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  );
);

【讨论】：

感谢您的洞察力。我忘了补充说我在页面上有多个表单，所以我使用了您的代码并添加了一个对象来跟踪要取消哪个 setTimeout [codevar container = ; var forms = $(".update-comment.approve"); forms.each(function (index) container['timeout'+index] = 0; );[/code]

【参考方案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 );
);

【参考方案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()

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");  
);

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