Question

我正在尝试编写一些javascript：haml模板中的javascript闭包。它应该根据ajax调用的状态显示/隐藏具有控件的div。我无法正确运行该代码。我不知道为什么。 Ajax处理程序的成功和完成不会被调用。 Firebug显示成功的ajax请求，并且控制台中没有错误。我认为Thin.ajax中的“self”可能会被某种方式打破。

function Thin() {
  this.ajax = function() {
    $.ajax({ url: "#{check_if_running_user_case_path(@user_case)}", success: this.on_success, error: this.on_error, dataType: "json", complete: this.poll, timeout: 30000 });
  }

  this.poll = function() {
    alert("poll");
    setTimeout(this.ajax, 2000);
  };

  this.manage_divs = function(st) {
    if (st != this.running) {
      if (st == "running") {
        this.hide_div_arr_show_div([this.start_div, this.starting_div, this.stopping_div], this.stop_div);
      } else if (st == "starting"){
        this.hide_div_arr_show_div([this.start_div, this.stop_div, this.stopping_div], this.starting_div);
      } else if (st == "stopping"){
        this.hide_div_arr_show_div([this.start_div, this.stop_div, this.starting_div], this.stopping_div);
      } else {
        this.hide_div_arr_show_div([this.stopping_div, this.stop_div, this.starting_div], this.start_div);
      }
      this.running = st;
    }
  };

  this.setup  = function(start_div, starting_div, stop_div, stopping_div) {
    this.start_div    = start_div;
    this.starting_div = starting_div;
    this.stop_div     = stop_div;
    this.stopping_div = stopping_div;
    // set as stopped
    this.running = "12345";
    this.poll();
  };

  this.on_error   = function(jqXHR, textStatus, errorThrown){
    alert(["Thin polling error", textStatus]);
  };

  this.on_success = function(data, textStatus, jqXHR) {
    alert("success!");
    var st = data.user_case;
    this.manage_divs(st);
  };

  this.hide_div_arr_show_div  = function(div_arr, div){
    for(var i = 0; i < div_arr.length; i++)
        div_arr[i].hide();
    div.show();
  };
};

var thin = new Thin();
thin.setup($("#user_case_stopped"), $("#user_case_starting"), $("#user_case_running"), $("#user_case_stopping"));
thin.manage_divs("#{@running}");

Answer 1

jQuery内部的Ajax方法this将引用全局范围。尝试显式引用您的父对象以确保使用正确的范围（您的对象）：

function Thin() {
    var that = this;

    that.ajax = function() {
                  $.ajax({ url: "#{check_if_running_user_case_path(@user_case)}",
                        success: that.on_success, 
                        error: that.on_error, 
                        dataType: "json", 
                        complete: that.poll, 
                        timeout: 30000 });
                }

    ...

修改：仅供参考，this is a nice article关于Javascript中this的范围。

Answer 2

我在firefox中遇到了这个错误，所以我只是简单介绍了成功方法。

而不是成功：this.success

我用过

success:function(){},

成功的$ .ajax请求成功后没有调用

2 个答案: