带有 setTimeout 或 setInterval 的 jQuery 插件答案

【问题标题】：jQuery Plugin with setTimeout or setInterval带有 setTimeout 或 setInterval 的 jQuery 插件
【发布时间】：2012-02-03 20:52:49
【问题描述】：

我正在开发我的第一个 jQuery 插件，它是一个简单的倒计时计时器，带有设置目标日期的选项。目标是让纯文本时钟倒计时到提供的目标日期和时间。对于我的一生，我无法弄清楚如何在插件中使用 setTimeout 或 setInverval ，所以它实际上是倒计时的。花了一整天时间研究 stackoverflow 和其他资源，但找不到解决方案，如果我没有得到它，请道歉。

这是我得到的：

(function( $ ){

  $.fn.clock = function( options ) {  

    // ESTABLISH DEFAULTS
    var settings = $.extend( {
      'target' : '07/21/2013 09:00:00', // mm/dd/yyyy hh:mm:ss
    }, options);

    return this.each(function() {        

      // calculate milliseconds to target
      tarDate = new Date(settings.target);
      dateNow = new Date();
      amount  = tarDate.getTime() - dateNow.getTime();
      delete dateNow;

      // set label
      label = settings.title;

      // generate output
      if(amount <= 0) {
        out = '000:00:00:00';
      } else {
        td = 0; th = 0; tm = 0; ts = 0; out = ''; // reset everything
        amount = Math.floor(amount/1000);         // kill the milliseconds
        td     = Math.floor(amount/86400);        // calculate days to target
        amount = amount%86400;                    // convert amount to days
        th     = Math.floor(amount/3600);         // calculate hours to target
        amount = amount%3600;                     // convert amount to hours
        tm     = Math.floor(amount/60);           // calculate minutes to target
        amount = amount%60;                       // convert amount to minutes
        ts     = Math.floor(amount)+1;            // calculate seconds to target

    out += (td<=99?'0':'') + (td<=9?'0':'') + td + ':';
    out += (th<=9?'0':'') + th + ':';
    out += (tm<=9?'0':'') + tm + ':';
    out += (ts<=9?'0':'') + ts;
      }

      // assemble and pump out to dom
      $(this).html(out);

      // set refresh rate
      ??????

    });

  };
})( jQuery );

【问题讨论】：

标签： javascript jquery plugins jquery-plugins settimeout

【解决方案1】：

查看this link 了解插件创作的有趣模式。基本上你需要做的是提供一个更新时钟的“方法”：

(function( $ ){

    function updateClock(element) {
        var settings = element.data("settings");
        // Your update logic goes here
    }

    $.fn.clock = function( options ) {  
        if ( options === 'update' )
            return updateClock(this);
        // Other methods, if any
        else if ( typeof options !== 'object' )
            throw 'Unknown method';

        // ESTABLISH DEFAULTS
        var settings = $.extend( {
            'target' : '07/21/2013 09:00:00', // mm/dd/yyyy hh:mm:ss
        }, options);

        // Save your settings for later access
        this.data("settings",settings);

然后，每次你想更新一个元素时，你都这样调用它：

$(yourselector).clock("update");

（从外部；如果 updateClock 可以从您的范围访问，您可以直接调用它以提高效率。只要记住在必要时将元素包装在 $() 中）

最后，您必须配置setTimeout 或setInterval。我更喜欢 setTimeout，因为这将允许您在必要时停止或重新启动时钟。将此添加到您的 updateClock 的末尾，可能会在前面加上一个检查：

setTimeout(function() { updateClock(element); }, settings.refreshRate);

【讨论】：

我可以看到它是如何工作的，但是如何将插件选项传递给 updateClock 函数？有没有办法在 $.fn.clock 中使用 setTimeout？顺便说一句，好文章，谢谢你的链接。
@codybuell 查看我的更新答案。基本上，您在创建元素时保存您的选项，然后在调用方法时使用data 函数检索它们（如果在单个时钟中使用，也可用于维护状态）。你可以在创建元素后第一次调用你的更新函数，最后它会为你调用setTimeout。或者直接调用它，你的选择。

【解决方案2】：

我相信你必须在需要调用的函数中设置 setTimeout 并让 setTimeout 调用它所在的函数。然后设置条件，这样一旦达到零 clearTimeout 就会关闭http://jsfiddle.net/qUYQN/

【讨论】：

我可以让它作为一个 javascript 函数正常工作，但我不知道如何在 jquery 插件中完成它。