😤 💗 🦍 jQueryタイマー Ⓜ️ 🚶🏾 🧑🏾‍🤝‍🧑🏾

ユーザーインターフェイスを設計するときに、いつかタイマーを使用するタスクが必ず発生します。この記事では、アプリケーションでタイマーを作成および使用する作業を大幅に促進する素晴らしいjQuery Timersプラグインについて説明します。

jQuery Timersは、setTimeoutおよびsetIntervalメソッドの高レベルの抽象化です。 jQueryタイマーを使用すると、タイマーをコード内の要素に直接「アタッチ」し、いくつかの機能を使用できます。

いつものように、最初に例を見てから、ソースコードを分析します。

サンプルとソースコードはここからダウンロードできます。

例1-単純に秒をカウントする制御されないタイマーを示します。

例2-開始および停止する機能を備えた0〜15秒のタイマー。

例3-特定の時間後に特定の機能を実行する「ワンタイム」タイマー。

この例は、プラグインが実装する3つのメソッドすべての操作を示すように書かれています。

HTMLコードとCSSコードは意味がありません-それらは単純すぎます。ソースでそれらを見ることができます。 jsコードのみを詳細に分析します。

したがって、サンプルコード1：

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

$( "#example_1" ).everyTime(1000, function (i) { $( this ).text(i); }); * This source code was highlighted with Source Code Highlighter .

識別子＃example_1を持つ要素を選択し、タイマーを「アタッチ」しました。タイマーは1000ミリ秒ごとに起動します。したがって、選択された要素に別の数字を挿入する関数が毎秒作成されます。この例では、2つの必須引数のみをメソッドに渡しました。オプションのものもありますが、以下で説明します。

例2のコードを見てみましょう。

$（ " #start " ）.click（ function （）{
$（ "＃example_2" ）.everyTime（1000、 'timer2' 、関数（i）{
$（ this ）.text（i）;
}、15）;
}）;
$（ "#stop" ）.click（ function （）{
$（ "＃example_2" ）.stopTime（ 'timer2' ）;
}）;
*このソースコードは、ソースコードハイライターで強調表示されました。

識別子#startのボタンをクリックすると、識別子＃example_2の要素を選択し、すでにおなじみのeveryTimeメソッドを呼び出します。しかし同時に、必要な引数に加えて、さらに2つを彼に渡します。 timer2は対応するタイマーの「ラベル」であり、数字の15はタイマーが停止する前に動作する回数です（もちろん他のイベントがそれより早く停止しない限り）。

識別子#stopのボタンをクリックすると、識別子＃example_2の要素を再度選択し、stopTimeメソッドを呼び出して、停止するタイマーの「ラベル」を渡します。

そして最後に、例3：

$（ "＃example_3" ）.oneTime（ "30s" 、 function （）{
$（ this ）.hide（2500）;
}）;
*このソースコードは、ソースコードハイライターで強調表示されました。

識別子＃example_3を持つ要素にアタッチされる「ワンタイム」タイマー。最初の引数は、対応する関数が呼び出されるまでの時間です。このような「些細なこと」に注意してください-時間はミリ秒単位で表示できます-30,000、および人間が読める形式でわずか30秒です。

そして今、3つすべての方法のより詳細な説明。

everyTime（間隔、[ラベル]、fn、[回]、[ビレイ]）

everyTimeメソッドの引数は、特定の間隔（間隔：整数|文字列）で実行されるイベントとしての関数の定義（fn：関数）、必要な回数[回= 0：整数]です。 times引数が0に設定されている場合、関数は何度でも呼び出されます。引数[label = interval：String]は、対応するタイマーの「ラベル」です。 [belay]-前の反復が何らかの理由で完了しなかった場合に発生するイベント。

oneTime（間隔、[ラベル]、fn）

oneTimeメソッドの引数は、要素がjQueryオブジェクトに追加された後、一定期間（間隔：整数|文字列）後に呼び出される関数（fn：関数）の定義です。引数[label = interval：String]は、対応するタイマーの「ラベル」です。

stopTime（[ラベル]、[fn]）

メソッドは、対応するラベル[ラベル：整数| [String]を選択し、[fn：Function]関数の実行を終了します。引数が1つも渡されなかった場合、メソッドはjQueryオブジェクト要素のすべてのタイマートリガーイベントを停止します。引数[fn]のみが渡された場合、この関数を呼び出すすべてのイベントは、ラベルに関係なく停止されます。最後に、[label]引数のみが渡された場合、初期化中にこのラベルに関連付けられたすべてのイベントが停止します。

チュトゥ

jQueryタイマー

More articles: