由多個元素觸發的JavaScript全局定時器？

我在頁面上有兩個jQuery滑塊。我想在用戶設置它們時觸發一個事件。我將「set」定義爲「兩個滑塊空閒3秒鐘」。由多個元素觸發的JavaScript全局定時器？

我可以做這樣的事嗎？還是不好的做法是創建一個像這樣的全局變量/代碼是否存在其他問題？

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

來源

2012-02-23 Richard

的另一個問題是複製粘貼代碼，你可以使用'$（「＃滑蓋1，＃滑塊-2」）滑塊（...）' – Esailija 2012-02-23 15:34:03

你不需要全局變量。您的代碼必須包含在$(document).ready區塊中，以便在文檔準備就緒時調用.slider方法。

已創建一個閉包，您可以在其中聲明globalTimer變量。

當.slider插件良好定義^見底部，可以組合選擇器，並使用.slider(..)以激活兩個元件插件：

$(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);  
     } 
    }); 
});

在jQuery中，插件應如圖所示被定義下面。這允許一個插件調用在與選擇器匹配的所有元素上應用功能。這有效地降低代碼：

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

來源

2012-02-23 15:31:53

真棒回答，謝謝！是的，我的代碼已經包裝在'$（document）.ready'中，並且我正在使用jQuery UI滑塊，所以它應該是明確的。我想檢查是確定接線盒中使用「全局」變量，因爲我知道「全局」在一般的不好的做法只是皺了皺眉頭，但我看不到另一種方式來寫。 – Richard 2012-02-23 15:53:23

@Richard Globals被詬病，因爲它們可能與其他腳本衝突。閉包內的變量永遠不會導致另一個腳本出現問題，因爲局部變量在閉包之外是不可見的。 – 2012-02-23 15:55:56

由多個元素觸發的JavaScript全局定時器？

回答

相關問題