jQueryUI小部件工厂

当我调用getTime时，我得到了预期的值，但是我得到了jQuery选择器，当我在不使用Ajax的情况下手动设置值时，它会按预期工作。

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

因此，请保存此引用，并在以后使用它，如下所示：

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

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


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

编辑 考虑到

$.get

是异步的，因此当

$.get

完成但代码运行时，将设置timestamp属性

概念：

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

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

因此，请考虑正确处理异步

演示：

只是一个小小的补充：您可以使用

$.proxy

在函数中轻松更改

此

，这对于使用小部件工厂特别有用

此外，您应该为

timestamp

变量设置一个默认值，并且应该在其名称前面包含一个下划线（因为这是“private”（伪private）字段的约定——我假设它应该是private，因为您有一个getter）：

---

考虑以下几点

例如：

JavaScript

$.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;
    }
});

$（函数（）{
$.widget（“app.serverTime”{
选项：{
服务器：“https://worldtimeapi.org/api/ip",
showLabel:true，
labelValue:“服务器时间：”
},
_创建：函数（）{
var self=这个；
self.element.addClass（“ui服务器时间ui小部件”）；
if（self.options.showLabel）{
$("", {
类：“ui服务器时间标签”，
样式：“右边距：5px
}).html（self.options.labelValue）.appendTo（self.element）；
}
$("", {
类：“ui服务器时间显示”
}).appendTo（self.element）；
$("", {
类：“ui服务器时间刷新”，
样式：“左边距：5px
}).html（“刷新”）。按钮({
图标：“ui-icon-arrow-1-s”，
showLabel:错误
})。单击（函数（）{
self.getTime（）；
}).hide（）.appendTo（self.element）；
self.getTime（）；
},
_日志：函数（str）{
log（Date.now（），str）；
},
_serverTime:null，
_collectTime:函数（）{
var self=这个；
self.beforegetime（）；
$.ajax({
cache:false，
键入：“获取”，
url:this.options.server，
成功：功能（结果）{
self._log（“收集时间：+results.unixtime”）；
自我设定时间（结果）；
}
});
},
_设置时间：功能（obj）{
此日志（“时间设定器”）；
这是。_serverTime=obj
},
_getTime:function（）{
这个。_log（“时间获取者”）；
var dt=新日期（this.\u serverTime.datetime）；
$（“.ui服务器时间显示”，this.element）.html（dt.toString（））；
$（“.ui服务器时间刷新”，this.element）.show（）；
将此返回。\u serverTime；
},
beforeGetTime:函数（）{
此日志（“获取时间前”）；
},
getTime:function（）{
这个；
这个延迟（这个时间，500）；
},
_销毁：函数（）{
this.element.children（）.remove（）；
this.element.removeclass（“ui服务器时间”）；
}
});
$（“.clock”）.serverTime({
showLabel:错误
});
});

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

---

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

最好使用JSFIDLE…无法跨域Ajax请求该值未被覆盖！如果GET请求返回fine，那么它应该；我建议调查一下。这是一个示例演示（不包括AJAX），问题似乎与AJAX有关，因为它是异步的，返回在读取实际值之前被触发。在这种情况下，您可以附加一个

$.get（）。始终（function（）{/*do updates Here*/}）

是的，这就是问题所在！我需要找出如何在我的案例中实施它。一些进一步的发展：

$.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;
    }
});

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