Question

在Johan回答previous question on the Deferred object后，我创建了以下代码：

var modalConfirm = (function ($) {

    var dfd = $.Deferred();

    var cls = function () {

        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
    }

    cls.prototype = {
        yes: dfd.promise().done,
        no: dfd.promise().fail
    };

    return cls;

})(jQuery);

function mHideConfirm(t) {
    $('#modal-confirm' + t).remove()
    $('#modal-overlay' + t).remove();
}

$('#lst').dblclick(function() {
    new modalConfirm({ title: 'A title', text: 'A text' })
    .yes(function() {
        console.log('YES');
    })
    .no(function() {
        console.log('NO');
    });
});

这可以像我期望的那样第一次显示modal-confirm div，解析或拒绝（基于点击的按钮）然后隐藏div（mHideConfirm）。（我添加了t，以防有一些ID唯一性问题 - 没有这个问题

当dblclick随后出现时会出现问题。该过程会自动触发上一个实例中的Deferred事件。因此，如果我第一次点击是，当dblclick第二次出现时，是会在没有点击按钮的情况下触发。

似乎dfd变量未使用新的modalConfirm对象重新初始化，或者至少不在按钮的click事件或cls.prototype内。

非常感谢任何想法或建议。

Answer 1

您正在为该类的所有实例重用相同的deferred / promise对象，而是需要为每个实例创建一个新对象。

var modalConfirm = (function ($) {

    var cls = function () {

        var dfd = $.Deferred();
        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
        this.yes = dfd.done;
        this.no = dfd.fail;
        return this;
    }

    return cls;

})(jQuery);

然后您可以简单地：

(function ($) {

    var modalConfirm = function () {

        var dfd = $.Deferred();
        this.title = arguments[0].title;
        this.text = arguments[0].text;

        var t = new Date().getTime();

        var html = '<div class="modal show" id="modal-confirm' + t + '">\n';
        html += '   <div class="panel">\n';
        html += '       <h2>' + this.title + '</h2>\n';
        html += '       <p>' + this.text + '</p>\n';
        html += '       <div class="buttons">\n';
        html += '           <input type="button" id="confirm-yes' + t + '" value="Yes">\n';
        html += '           <input type="button" id="confirm-no' + t + '" value="No">\n';
        html += '       </div>\n';
        html += '    </div>\n';
        html += '</div>\n';
        html += '<div id="modal-overlay' + t + '" class="overlay"></div>\n';

        $('body').append(html);

        $('#confirm-no' + t).click(function () {
            mHideConfirm(t);
            dfd.reject({ modal: null });
        });
        $('#confirm-yes' + t).click(function () {
            mHideConfirm(t);
            dfd.resolve({ modal: null });
        });
        this.yes = dfd.done;
        this.no = dfd.fail;
        return this;
    }

    window.modalConfirm = modalConfirm;

})(jQuery);

jQuery延迟不重新初始化

1 个答案: