Плагин jQuery с setTimeout или setInterval - PullRequest
Новая
       10

Плагин jQuery с setTimeout или setInterval

1 голос
/ 04 февраля 2012

Я работаю над своим первым плагином 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 );

Ответы [ 2 ]

2 голосов
/ 04 февраля 2012

Проверьте эту ссылку для интересного шаблона для разработки плагинов. По сути, вам нужно предоставить «метод» обновления ваших часов: 

(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);
2 голосов
/ 04 февраля 2012

Я полагаю, что вы должны иметь setTimeout внутри функции, которую нужно вызвать, и иметь setTimeout, чтобы вызвать функцию, в которой она находится. Затем настройте условие так, чтобы по достижении нуля clearTimeout погасло http://jsfiddle.net/qUYQN/

...