JavaScriptのグローバルタイマーは複数の要素によって起動されますか？

Question

ページに2つのjQueryスライダがあります。ユーザーが両方のイベントを設定したときにイベントを発生させたいと思います。私は "set"を "両方のスライダが3秒間アイドル状態になったとき"と定義します。

私はこのようなことをすることができますか、このようなグローバル変数を作成することは悪い習慣ですか？/コードに他の問題はありますか？

var globalTimer = null; 
function myEvent() { 
    alert('Both sliders are set!'); 
} 

$("#slider-1").slider({ 
    stop: function(event, ui) { 
    clearTimeout(globalTimer); 
    globalTimer = setTimeout(myEvent, 3000);  
    } 
}); 
$("#slider-2").slider({ 
    stop: function(event, ui) { 
    clearTimeout(globalTimer); 
    globalTimer = setTimeout(myEvent, 3000);  
    } 
}); 

Answer 1

グローバル変数は必要ありません。あなたのコードは$(document).readyブロックに含まれていなければなりません。したがって、ドキュメントが準備完了したら.sliderメソッドが呼び出されます。

これは、すでにglobalTimer変数を宣言できるクロージャを作成します。

.sliderプラグインが下を参照してください^{明確に定義されている場合は、あなたがセレクタを組み合わせて、両方の要素のためのプラグインを有効にする.slider(..)を使用することができますjQueryので}

$(function() { 
    var globalTimer = null; 
    function myEvent() { 
     alert('Both sliders are set!'); 
    } 

    $("#slider-1, #slider-2").slider({ 
     stop: function(event, ui) { 
     clearTimeout(globalTimer); 
     globalTimer = setTimeout(myEvent, 3000);  
     } 
    }); 
}); 

示すように、プラグインが定義されなければなりません以下。これにより、単一のプラグイン呼び出しで、セレクタに一致するすべての要素に機能を適用できます。これは、効果的にコードを削減：

$.fn.plugin = function() { 
    // this = jQuery object 
    return this.each(function() { 
     // function logic, this = DOM element 
    }); 
};