Jquery UI 小部件工厂

Question

$.widget( "app.serverTime", {
    _create: function () {
        $.get("/timestamp.php", function( data ) {
           this.timestamp = data.timestamp;
        })
    },

    getTime:function() {
       return this.timestamp;
    }
});


$(".clock").serverTime();
$(".clock").serverTime("getTime")

我有上面的 jQuery UI 小部件，当我调用 getTime 时，我得到了预期的值，但我得到的是 jQuery 选择器，当我手动设置值而不使用 Ajax 时，它按预期工作。

Answer 1

我认为问题是因为这个。在 get 函数内部 this 不是指插件 calee 对象。

所以保存this 参考并在以后使用它：

$.widget( "app.serverTime", {
    _create: function () {
        var _this=this;
        $.get("/timestamp.php", function( data ) {
           _this.timestamp = data.timestamp;
        })
    },

    getTime:function() {
       return this.timestamp;
    }
});

编辑

考虑到$.get 是异步的，所以当$.get 完成时会设置timestamp 属性，但代码会运行。

概念：

$(".clock").serverTime();

setTimeout(function () {
    console.log($(".clock").serverTime("getTime"));
}, 5000);

所以考虑正确处理异步。

演示：http://jsfiddle.net/IrvinDominin/5pFkk/

Answer 2

只是对@Irvin's answer 的一个小补充：您可以使用$.proxy 在函数内轻松更改this，这对于使用小部件工厂特别有用；

此外，您应该为timestamp 变量设置一个默认值——并且应该在其名称前包含一个下划线（因为这是“私有”（伪私有）字段的约定——我认为它应该是私有的，因为你有一个吸气剂）：

$.widget( "app.serverTime", {
    _create: function () {
        $.get("/timestamp.php", $.proxy(function( data ) {
           this._timestamp = data.timestamp;
        }, this))
    },
    _timestamp: "Tue Jul 15 2014 08:50:38 GMT+0100 (GMT Standard Time)",

    getTime:function() {
       return this._timestamp;
    }
});

Answer 3

考虑以下内容。

示例：https://jsfiddle.net/Twisty/yft97sme/

JavaScript

$(function() {
  $.widget("app.serverTime", {
    options: {
      server: "https://worldtimeapi.org/api/ip",
      showLabel: true,
      labelValue: "Server Time:"
    },
    _create: function() {
      var self = this;
      self.element.addClass("ui-server-time ui-widget");
      if (self.options.showLabel) {
        $("<label>", {
          class: "ui-server-time-label",
          style: "margin-right: 5px;"
        }).html(self.options.labelValue).appendTo(self.element);
      }
      $("<span>", {
        class: "ui-server-time-display"
      }).appendTo(self.element);
      $("<button>", {
        class: "ui-server-time-refresh",
        style: "margin-left: 5px;"
      }).html("Refresh").button({
        icon: "ui-icon-arrowreturnthick-1-s",
        showLabel: false
      }).click(function() {
        self.getTime();
      }).hide().appendTo(self.element);
      self.getTime();
    },
    _log: function(str) {
      console.log(Date.now(), str);
    },
    _serverTime: null,
    _collectTime: function() {
      var self = this;
      self.beforeGetTime();
      $.ajax({
        cache: false,
        type: "get",
        url: this.options.server,
        success: function(results) {
          self._log("Collected Time: " + results.unixtime);
          self._setTime(results);
        }
      });
    },
    _setTime: function(obj) {
      this._log("Time Setter");
      this._serverTime = obj
    },
    _getTime: function() {
      this._log("Time Getter");
      var dt = new Date(this._serverTime.datetime);
      $(".ui-server-time-display", this.element).html(dt.toString());
      $(".ui-server-time-refresh", this.element).show();
      return this._serverTime;
    },
    beforeGetTime: function() {
      this._log("Before Get Time");
    },
    getTime: function() {
      this._collectTime();
      this._delay(this._getTime, 500);
    },
    _destroy: function() {
      this.element.children().remove();
      this.element.removeclass("ui-server-time");
    }
  });

  $(".clock").serverTime({
    showLabel: false
  });
});

如果您在创建小部件时运行 GET，它将显示从那一刻起的服务器时间。如果服务器响应缓慢，也会延迟创建。我建议将时间的集合转移到它自己的功能上。这样您就可以随时调用它。

假设您的 PHP 脚本可能返回不同的值，您可能需要调整结果处理。