Ajax .done（）真正的執行時間？

Question

我想在圖像上添加點，所以我使用ajax來獲取數據，但在下面的代碼中，我使用map_add_beacon();來發送請求，我沒事，直到.done(function (beacondata)，我希望此代碼在data.push({ x: 300, y: 300, text: 'test point1' });之前執行，但.done(function (beacondata)真正的執行是在var Taggd = function(element, options, data)完成後，我該如何讓ajax快速執行？

謝謝！

var Taggd = function(element, options, data) { 
     var _this = this; 

     if(options.edit) { 
      options.handlers = 
      { 
       click: function() { 
        _this.hide(); 
        methods.show.call(this); 
       } 
      }; 
     } 

     this.element = $(element); 
     this.options = $.extend(true, {}, defaults, options); 
     this.data = data; 

     map_add_beacon(); 

     data.push({ x: 300, y: 300, text: 'test point1' }); 
     data.push({ x: 300, y: 400, text: 'test point2' }); 

     this.initialized = true; 

     if(!this.element.height() || !this.element.width()) { 
      this.element.on('load', _this.initialize.bind(this)); 
     } 
     else this.initialize(); 
    }; 

    function map_add_beacon(){ 
     var request = "/maps/map_beacon_assigned?locate_id=1" //access controller of interest 
     //+ $('#uninstall_brand_id_select').val(); 
     var aj = $.ajax({ 
       url: request, 
       type: 'get', 
       beacondata: $(this).serialize() 
      }).done(function (beacondata) { 
       insert_beacon(beacondata);//modify the majors' dropdown 
      }).fail(function (beacondata) { 
       console.log('AJAX request has FAILED'); 
      }); 
    }; 

    function insert_beacon(beacondata){ 
     for(var i=0;i<beacondata.length;i++){ 
      data.push({ x: beacondata[i][0], y: beacondata[i][1], text: beacondata[i][2] }); 
     }; 
    }; 

Answer 1

jQuery的可以讓您鏈done方法，所以你可以創建一個單獨的功能，包含您data.push代碼，然後可以你$.ajax.done電話後執行。

目前還不清楚你的代碼如何與jQuery環境相關。它看起來像這個代碼需要幾個jQuery方法出現在this對象上，但你的代碼片段看起來不像插件代碼。您的發佈代碼中還存在一些範圍問題（其中done已聲明或傳遞給您的insert_beacon函數），並且您引用的代碼段中實際上並不存在的代碼段中的_initialize函數。如果你願意，你可以用它作爲起點，但它不會按原樣工作。

var Taggd = function(element, options, data) { 
    this.element = $(element); 

    if(options.edit) { 
    options.handlers = 
     { 
     click: function() { 
     // Where is the `hide()` method declared. Should this be `this.element.hide()`? 
     this.hide(); 
     // What is `methods`? 
     methods.show.call(this); 
     }.bind(this); 
    }; 
    } 

    this.options = $.extend(true, {}, defaults, options); 
    this.data = data; 

    // Declare functions internal to the `Taggd` object to close over the `data` object 
    // for later execution 
    var insert_beacon = function(beacondata){ 
    for(var i = 0; i < beacondata.length; i++){ 
     data.push({ x: beacondata[i][0], y: beacondata[i][1], text: beacondata[i][2] }); 
    } 
    }; 

    var map_add_beacon = function(){ 
    var request = "/maps/map_beacon_assigned?locate_id=1"; //access controller of interest 
    //+ $('#uninstall_brand_id_select').val(); 
    var aj = $.ajax({ 
     url: request, 
     type: 'get', 
     beacondata: $(this).serialize() 
    }) 
    // jQuery allows you to chain `done` methods: http://api.jquery.com/deferred.done/ 

    // modify the majors' dropdown 
    .done(insert_beacon) 

    // finish initialization 
    .done(ajaxCallback) 

    // `beacondata` isn't passed to the fail method 
    .fail(function (jqXHR, textStatus, errorThrown) { 
     console.log('AJAX request has FAILED with error: ', errorThrown); 
    }); 
    }.bind(this); 

    var pushExtraData = function() { 
    data.push({ x: 300, y: 300, text: 'test point1' }); 
    data.push({ x: 300, y: 400, text: 'test point2' }); 
    }; 

    var ajaxCallback = function() { 
    pushExtraData(); 
    this.initialized = true; 
    // If anything fails here, you should reject 
    }.bind(this); 

    // Where is the `initialize` function declared? 
    if(!this.element.height() || !this.element.width()) { 
    this.element.on('load', this.initialize.bind(this)); 
    } else { 
    this.initialize(); 
    } 

    map_add_beacon(); 

};