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

How do I clear an event call set using delay()

本文关键字：事件 调用 清除 何使用 delay      更新时间：2023-09-26

>我有两个按钮，批准（可见）和撤消（不可见）。单击"批准"将隐藏该按钮并显示撤消按钮（表示为故障保险）。单击"批准"将设置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');
        });

您是否在文档中看到黄色框？

.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和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 );
});

尝试

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>

相关文章：