Question

我在页面上有两个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(..)激活两个元素的插件：

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

JavaScript全局计时器由多个元素触发？

1 个答案: