使用.confrm(）条件调用带有持续时间的jquery.fadeOutput(）会打乱回调的时间

Using .confirm() conditional to call jquery .fadeOut() with duration messes up timing of callback

本文关键字：fadeOutput 回调 时间 jquery 持续时间 条件 confrm 调用 使用      更新时间：2023-09-26

我想让用户确认删除表行。如果他们说是，那么我想在设置持续时间的表行上使用jquery fadeOut（）方法，并在淡出完成后使用回调来删除表行。

这在没有confirm的情况下工作得很好，但confirm添加了奇怪和不一致的行为。如果我马上点击"ok"，那么它会像预期的那样工作。但是，如果我在点击"ok"之前等待几秒钟，淡出有时会被跳过，那么这一行需要几秒钟才能被删除。这是不一致的，有时我需要先做一些其他事情（比如添加一行），然后我得到错误的行为（见下面的演示链接）。此外，例如，如果我在Facebook中将页面加载为iframe，我每次都会遇到问题。

我认为这与异步编码与渐进编码有关，并试图更改代码，将fadeOut作为自定义确认函数的回调调用，但这并没有解决任何问题。很可能我做得不好。除非被要求，否则我不会发布该代码以避免混淆。我还认为这可能与jquery事件队列或执行上下文有关，但我不太了解/调试这一点。

因此，这是我的代码片段中的问题所在。请注意，如果我去掉confirm，或者如果我去掉fadeOut，只使用remove:，它会很好地工作

// handler to remove question (uses "on" to bind event to future added rows)
        $("#questions").on("click",".removeQuestion", function(){
            if (confirm('Are you sure you want to remove this question?')) {
                // be sure to leave one question to fill in
                if ($("table#questions tr").length == 1) {
                    $(this).parents("td").find("textarea").val('');
                    $(this).parents("td").find("input[type=radio]").attr('checked', false);
                }
                else {
                    $(this).parents("tr").fadeOut(300, function() {
                        $(this).remove();
                    });
                    // update total questions text
                    $(".total_questions").text(function(index, text) {
                      return parseInt(text)-1;
                    });
                }
            }
        });

这里有一个演示页面的链接，您可以在这里尝试复制错误（您可能需要处理一些错误-请参阅上面关于不一致的注释-前几次尝试通常效果很好），并查看整个来源：https://xcitemediacustomfacebookpages.com/hebetsmccallin/admin_test.php

顺便说一下，我正在Mac上的Chrome上测试它。

谢谢你的帮助！我在这个问题上一直在兜圈子，这太令人沮丧了。

我在使用confirm（）和.animate（）-函数时遇到了同样的问题。似乎.fadeOut（）或在我的情况下.animate）在调用confirm时立即开始计数。我找到的解决方案是在队列中添加一个自定义函数：

$('#myId').queue(function(){
    $(this).delay(0).dequeue();
}).animate({
    top: 0  // Example
}, 'slow');

在您的情况下，这将是：

$(this).parents("tr").queue(function(){
    $(this).delay(0).dequeue();
}).fadeOut(300, function() {
    $(this).remove();
});

额外的函数基本上等待0毫秒，然后继续处理队列，这似乎可以防止动画立即被调用。不过，如果没有.delay（），它就不起作用。。。

希望这能有所帮助！

如果删除对jquery.tablednd_0_5.js的引用，您还会遇到这个问题吗？

如果您将事件绑定功能更改为：

$(".removeQuestion").live("click", function(){
    //rest of previous function content
});

我没有Mac，所以我真的看不出这是不是"Mac"的问题。我看过你的代码，并对其进行了一些重写，使其能够重用一些东西：

$('#questions .removeQuestion').on('click', function() {
        var element = $(this).closest('tr');
        if (confirm('Are you sure you want to remove this question?')) {
            var nrOfQuestions = $('#questions tr').length;    
            if (nrOfQuestions == 1) {
                element.find('textarea').val('');
                element.find('input[type=radio]').removeAttr('checked');
            }
            else {
                element.fadeOut(300, function() {
                        element.remove();
                });
                // update total questions text
                $('.total_questions').text(nrOfQuestions - 1);
            }
    }
});

注：

  1. 我正在保存单击的行以便稍后处理——我使用了closest来获取最近的"父"
  2. 可以执行Find操作来查找整个子树中的子元素
  3. 每次重新计算问题数（重复使用以前的结果）
  4. 点击将触发删除链接，而不是#问题表
相关文章：