回调创建无限循环
问题描述:
如果未注释行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
}
});
}));
答
我发现这个问题!这只是一个简单的错字。我写了一个“;”而不是“,”让“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);
});
}
我有注释掉线99的代码,我能打开对话多次,至少在Chrome中。是否有一些其他信息可以帮助我们复制问题? – 2013-04-29 13:46:42
我在Firefox 20.0中遇到了此问题,无论是Windows还是Ubuntu还是Internet Explorer。 如果在第99行之前执行“console.log(myCallback)”,它会输出一个函数[无尽的次数]。我可以点击萤火虫并在98行登陆。 – DarsVaeda 2013-04-29 13:49:45
在Chrome中,保存操作在第二次调用后非常缓慢。但它仍然有效,Chrome显然会阻止无限循环,并且只是静静地取消了这些请求。 – DarsVaeda 2013-04-29 13:54:18