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环境的关系。看起来这段代码期望在this对象上出现几个jQuery方法，但是你的代码片段看起来不像插件代码。您在发布的代码中遇到了一些范围问题（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();

};

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

1 个答案: