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")

当我调用getTime时，我有上面的jQuery UI Widget我得到了我期望的值但是我得到了jQuery Selector，当我手动设置值而不使用Ajax时它按预期工作。

Answer 1

我认为问题是因为这个原因。在get函数中，这不是指插件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变量的默认值 - 并且应该在其前面加上一个下划线（因为这是常规for＆＃34; private＆＃34;（pseudoprivate）字段 - 我认为它应该是私有的，因为你有一个吸气剂）：

$.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 脚本可能返回不同的值，您可能需要调整结果处理。

Jquery UI Widget Factory

3 个答案:

修改