Ajax .done（）实际执行时间？

Question

I want to add point on image, so I use ajax to get data, but in following code, I use map_add_beacon(); to send request, I's all right until .done(function (beacondata), I want this code execute before data.push( { x: 300, y: 300, text: 'test point1' }); , but .done(function (beacondata) real execute is after var Taggd = function(element, options, data) finished, how can I let ajax quickly execute?

Thanks!

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 allows you to chain done methods, so you could create a separate function to contain your data.push code, which can then be executed after your $.ajax.done call.

It's unclear how your code relates to the jQuery environment. It looks like this code is expecting several jQuery methods to be present on the this object, but your code snippet doesn't look like plugin code. You've also got some scoping problems in your posted code (where is done declared or passed to your insert_beacon function), and you reference an _initialize function in your snippet that isn't actually present anywhere in your posted code. You can use this as a starting point if you wish, but it's not going to work as-is.

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

};