JavaScript回调被保存在内存中，并通过新的回调来执行。

Question

我正在做一个使用ajax的CMS类型的项目。我的问题发生在位于这里的notify.js javascript库上。https:/notifyjs.com。.

通过我的本地副本，我意识到，我可以创建设计时尚的确认按钮，而无需使用Javascript的内置。alert() 或 confirm() 方法，并使其看起来像这样。

.

看到源码没有提供从库外显式添加回调的方法，我按照自己的意愿进行了修改，其中 "回调 "参数是我自定义的参数。

我的问题是

    //confirmation notification
    Notification.prototype.confirm = function (style, position, title, text, callback) {
        var icon = "fa fa-adjust";
        if (style == "error") {
            icon = "fa fa-exclamation";
        } else if (style == "warning") {
            icon = "fa fa-warning";
        } else if (style == "success") {
            icon = "fa fa-check";
        } else if (style == "info") {
            icon = "fa fa-question";
        } else {
            icon = "fa fa-adjust";
        }
        $.notify({
            title: title,
            text : text + '<div class="clearfix"></div><br><a id="yesConfirmBtn" class="btn btn-sm btn-default yes">Yes</a><a id="noConfirmBtn"  class="btn btn-sm btn-danger no">No</a>',
            image: "<i class='" + icon + "'></i>"
        }, {
            style         : 'metro',
            className     : style,
            globalPosition: position,
            showAnimation : "show",
            showDuration  : 0,
            hideDuration  : 0,
            autoHide      : false,
            clickToHide   : false
        });
        //listen for click events from this style
        $(document).on('click', '.notifyjs-metro-base .no', function () {
            // turn off event listener on yes click
            $(document).off("click", '.notifyjs-metro-base .yes');

            //programmatically trigger propogating hide event
            $(this).trigger('notify-hide');
        });
        var yesClick = function () {
            //callback when user clicks
            callback();
            // callback is assigned empty closure  because on
            // the next confirm request this callback and
            // the new one will be called
            callback = function(){

            };

            //hide notification
            $(this).trigger('notify-hide');

        };
        $(document).on('click', '.notifyjs-metro-base .yes', yesClick);
    }

在点击听筒中，我的问题发生在 yesClick 监听器的主要原因是它继续一个接一个地添加回调，所以每次回调被创建和触发时，旧的回调就会被触发，然后剩下的直到最新的回调。

为了解决这个问题，我把回调指向一个空的匿名函数，这样当旧的函数被执行时，它不会做任何事情，但这种方式仍然不能解决我的问题，因为回调仍然会在内存中。

传入的回调执行一个Ajax请求来删除数据库中的一条记录。

这就是回调的样子

var self = this;
// triggers notify.js confirmDelete() method passing in the 
// body, title, and callback
this.notif.confirmDelete("Are you sure?", "Delete this Item?", function () {
    // creates a notification to show user their 
    // transaction is being processed
    self.notif.info("Deleting");
    // callback for if the ajax request was successful
    var successCB = function (text) {
        if (text.indexOf("true") !== -1) {
            self.notif.success("Item has been deleted", "Successfully Deleted");
            var form  = new Validate(),
                table = new Table();
            form.resetForm();
            table.removeRow(data.id);
        } else {
            self.notif.error("Could not be deleted...");
        }
      // callback if ajax request failed
    }, failCB     = function () {
        // this key word refer's to a method called 
        //Success which is the same as  successCB as they
        //are placed in the same object literal
        this.Success("false");
    };
    self.ajaxRequest(successCB, failCB, data);
});

self.ajaxRequest 看起来像这样（这是我做的一个自定义的ajax库，如果它看起来很奇怪）。

 var self          = this;
var dataToProcess = data || {};
// basic set up for ajax request
Ajaxify({
    host        : self.hostName + "Backend/manage/" + self.processFile,
    data        : [dataToProcess],
    responseType: "text",
    method      : "POST",
    execute     : true,// executes request right away
    Success     : successCallback,
    Failure     : failureCallback
});

我到底做错了什么？

如何才能解决这个问题？

是什么原因造成的？

(注：如果需要进一步的信息，请告诉我)

Answer 1

你需要删除关闭的点击事件，因为你正在添加全局点击与上。

   function noClick() {
        //programmatically trigger propogating hide event
        $(this).trigger('notify-hide');
        removeEvents();
   }
   function removeEvents() {
       $(document).off('click', '.notifyjs-metro-base .no', noClick);
       $(document).off('click', '.notifyjs-metro-base .yes', yesClick);
   }
   $(document).on('click', '.notifyjs-metro-base .no', no);
   function yesClick () {
        //callback when user clicks
        callback();

        //hide notification
        $(this).trigger('notify-hide');
        removeEvents();
    };
    $(document).on('click', '.notifyjs-metro-base .yes', yesClick);