jQueryプラグイン（setTimeoutまたはsetIntervalを使用）

Question

私は最初の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); 

Answer 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); 

Answer 2

は、私はあなたが呼ばれ、その内の関数を呼び出すsetTimeoutを持ってする必要が関数内のsetTimeoutているように持っていると信じています、それ一度その条件を設定していますゼロに達するclearTimeoutは終了するhttp://jsfiddle.net/qUYQN/