異なるパラメータを持つオブジェクトを初期化する

Question

私はオブジェクトを持っていて、私はページ内で何度も呼びますが、パラメータは異なります。

lazyLoad.init({ 
      url: 'http://example.com/test1.js', 
      block: DIVID1 
     }) 

lazyLoad.init({ 
      url: 'http://test.com/test2.js', 
      block: DIVID2 
     }) 

未満、より：

var lazyLoad = (function() { 

    var CONFIG = { 
     block: '', 
     url: '' 
    } 

    function work(){    
     window.d = document 
     var buffer = '' 
     d.write = d.writeln = function(s){ buffer += s } 
     d.open = d.close = function(){} 
     s = d.createElement('script') 
     s.setAttribute('type','text/javascript') 
     s.setAttribute('src',CONFIG.url) 
     d.getElementById(CONFIG.block).appendChild(s) 
     s.onload = function() { 
      window.setTimeout(function() { 
       console.warn(CONFIG.block + ' ' + buffer) 
       d.getElementById(CONFIG.block).innerHTML += buffer 
       buffer = '' 
      }, 0) 
     } 
    } 

    return { 
      init: function (options) { 
       $.extend(CONFIG, options); 

       random = $('#'+CONFIG.block).attr('rel') 
       id = $('#'+CONFIG.block).attr('id').replace(random,'') 
       id = id.replace('DIV','') 
       size = id.split('X') 
       ele_width = size[0] || CONFIG.width 
       ele_height = size[1] || CONFIG.height 

       $('#'+CONFIG.block).css({ 
              'width':ele_width+'px', 
              'height':ele_height+'px', 
              'background':'url(/static/i/ajax-loading-black.gif) no-repeat center center' 
             }) 

       console.log(CONFIG.block) 
       $(window).load(function(){ 

         work() 

       }) 
      } 

    } 

})(); 

が、私はこのようにそれを呼び出す

lazyLoad.init({ 
      url: 'http://testdomain.com/test3.js', 
      block: DIVID3 
     }) 

文書をロードした後、私は、各divは幅を持っていることを確認し、高さこのスクリプトで適用されましたが、bufferは最後にdivにのみ挿入されました。

Answer 1

問題JavaScriptがCONFIGの値と呼ばれるtimeyour work関数で全てシングルスレッド（ここでWebWorkersを無視=））正しいものであるので、CONFIGは、外側の関数で宣言されていることです。しかし、毎回$.extend(CONFIG, options);を実行するたびに、s.onloadが放火された時点で同じオブジェクトを変更すると、に残った値が最後に使用されます。試してください：

var lazyLoad = (function() { 

    //var CONFIG = { 
    // block: '', 
    // url: '' 
    //} 

    function work(options){ 
     window.d = document 
     var buffer = '' 
     d.write = d.writeln = function(s){ buffer += s } 
     d.open = d.close = function(){} 
     s = d.createElement('script') 
     s.setAttribute('type','text/javascript') 
     //s.setAttribute('src',CONFIG.url) 
     //d.getElementById(CONFIG.block).appendChild(s) 
     s.setAttribute('src',options.url) 
     d.getElementById(options.block).appendChild(s) 
     s.onload = function() { 
      window.setTimeout(function() { 
       //console.warn(CONFIG.block + ' ' + buffer) 
       //d.getElementById(CONFIG.block).innerHTML += buffer 
       console.warn(options.block + ' ' + buffer) 
       d.getElementById(options.block).innerHTML += buffer 
       buffer = '' 
      }, 0) 
     } 
    } 

    return { 
      init: function (options) {    
       var CONFIG = { 
        block: '', 
        url: '' 
       } 
       $.extend(CONFIG, options); 

       random = $('#'+CONFIG.block).attr('rel') 
       id = $('#'+CONFIG.block).attr('id').replace(random,'') 
       id = id.replace('DIV','') 
       size = id.split('X') 
       ele_width = size[0] || CONFIG.width 
       ele_height = size[1] || CONFIG.height 

       $('#'+CONFIG.block).css({ 
              'width':ele_width+'px', 
              'height':ele_height+'px', 
              'background':'url(/static/i/ajax-loading-black.gif) no-repeat center center' 
             }) 

       console.log(CONFIG.block) 
       $(window).load(function(){ 

         //work() 
         work(CONFIG) 

       }) 
      } 

    } 

})();