콜백은 무한 루프를 만듭니다

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); 
    }); 
}