javascript - 回调创建无限循环

Question

如果取消注释第 99 行，此代码将为对话框的第二次调用创建一个无限循环。我不明白为什么。显然这是因为在第 95 行中，“myCallback”在下面得到“save.callback”，因此是从其自身调用的。但是为什么它没有被实际来自选项的内容覆盖？

如何修复此代码？

这里有一个关于 jsfiddle 的工作示例：http: //jsfiddle.net/JvcnG/

这里的代码：

function Sandbox() {
    // turning arguments into an array
    var args = Array.prototype.slice.call(arguments),
        // the last argument is the callback
        callback = args.pop(),
        // modules can be passed as an array or as individual parameters
        modules = (args[0] && "string" === typeof args[0]) ? args : args[0],
        i;

    // make sure the function is called
    // as a constructor
    if (!(this instanceof Sandbox)) {
        return new Sandbox(modules, callback);
    }

    // add properties to 'this' as needed:
    this.a = 1;
    this.b = 2;

    // now add modules to the core 'this' object
    // no modules or "*" both mean "use all modules"
    if (!modules || '*' === modules) {
        modules = [];
        for (i in Sandbox.modules) {
            if (Sandbox.modules.hasOwnProperty(i)) {
                modules.push(i);
            }
        }
    }

    // initialize the required modules
    for (i = 0; i < modules.length; i += 1) {
        Sandbox.modules[modules[i]](this);
    }

    // call the callback
    callback(this);

    // any prototype properties as needed
    Sandbox.prototype = {
        name: "Sandbox",
        version: "1.0",
        getName: function () {
            return this.name;
        }
    }
};

var box = {};

Sandbox.modules = {};

Sandbox.modules.news = function (box) {
    var box = box || {},
    dialog = null;

    box.removeDialog = function (object) {
        var dialog = object || box.dialog;
        dialog.remove();
    };

    box.getEntries = function (options) {
        var color = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
        $('#main').css('color', color);
    };

    box.editEntry = function (options) {
        var triggerElement = options.triggerElement
        save = options.save;

        triggerElement.live('click', function () {
            box.displayDialog({
                save: save
            });
        });
    };

    box.displayDialog = function (options) {
        var save = options.save || null,
            dialog = $('<div id="dialog-modal">loading</div>');

        box.dialog = dialog;

        dialog.html('<button id="save" class="save">Save</button>')
            .dialog({
            modal: true,
            autoOpen: false,
            height: 'auto',
            position: 'top'
        }).dialog('open');

        // do we have a save function?
        if (null != save) {
            var buttonSave = $('button.save', dialog);
            myCallback = save.callback;
            save.callback = function () {
                box.removeDialog(dialog);
                if (myCallback != undefined && typeof myCallback == 'function') {
                    //myCallback(); // creates an endless loop
                }
            };

            buttonSave.on('click', function () {
                box.updateData(save);
            });
        }
    };

    box.updateData = function (options) {
        var callback = options.callback;
        $('#footer').append('<p>ok</p>');
        if (callback != undefined && typeof callback == 'function') {
            callback();
        }
    }
}

// page ready
$.ready(
Sandbox(['news'], function (box) {
    var getEntries = function () {
        box.getEntries();
    };
    box.getEntries();

    box.editEntry({
        triggerElement: $('#main'),
        save: {
            callback: getEntries
        }
    });
}));

Answer 1

我发现了问题！这只是一个简单的错字。而不是“，”我写了一个“;” 让“myCallback”进入全球范围......

这个：

// do we have a save function?
if (null != save) {
    var buttonSave = $('button.save', dialog);
    myCallback = save.callback;
    save.callback = function () {
        box.removeDialog(dialog);
        if (myCallback != undefined && typeof myCallback == 'function') {
            //myCallback(); // creates an endless loop
        }
    };

    buttonSave.on('click', function () {
        box.updateData(save);
    });
}

必须替换为：

// do we have a save function?
if (null != save) {
    var buttonSave = $('button.save', dialog),
    myCallback = save.callback;
    save.callback = function () {
        box.removeDialog(dialog);
        if (myCallback != undefined && typeof myCallback == 'function') {
            //myCallback(); // creates an endless loop
        }
    };

    buttonSave.on('click', function () {
        box.updateData(save);
    });
}