每隔x秒调用一次Javascript函数,并在y秒后停止?

时间:2013-07-02 17:37:28

标签: javascript loops settimeout setinterval

我想在点击一个按钮后调用一个Javascript函数,让它每100毫秒循环一次,持续1.5秒,然后暂停它。

我的想法是,我想让这个手风琴滑块能够使用这个自定义jQuery滚动条显示可滚动内容(我不知道任何其他更好的自定义跨浏览器滚动条)。

每次用户点击其中一个项目时,必须使用此功能重建滚动条,使用此功能:

$(".ac-big").customScrollbar("resize")

为了使转换顺利进行,我使用了setInterval,如下例所示:

<script type="text/javascript">
$(window).load(function () {
$(function(){
    setInterval(function(){
    $(".ac-big").customScrollbar("resize")
},100);
});
</script>

问题是该脚本非常耗费资源。不需要每100毫秒运行一次。只有在用户点击一个单选按钮后,我才想让它每隔100毫秒运行1.5秒。

这是另一个问题。由于手风琴滑块是使用单选按钮构建的,如何在单选按钮上调用javascript函数单击?

我已经将setTimeout和setInterval插入到标签中,因为我相信我必须使用这些组合。如果我拥有所有必要的构建块,我就不会浪费你的时间。

1 个答案:

答案 0 :(得分:4)

鉴于此:

  

我想在点击一个按钮后调用一个Javascript函数,让它每100毫秒循环一次,持续1.5秒,然后暂停它。

这应该这样做:http://jsfiddle.net/pUWHm/

// I want to call a Javascript function after clicking a button
$('.button').click(function() {
  var started = Date.now();

  // make it loop every 100 milliseconds
  var interval = setInterval(function(){

    // for 1.5 seconds
    if (Date.now() - started > 1500) {

      // and then pause it
      clearInterval(interval);

    } else {

      // the thing to do every 100ms
      $(".ac-big").customScrollbar("resize")

    }
  }, 100); // every 100 milliseconds
});

策略是在单击按钮时启动间隔,然后保存该间隔ID。您也可以在开始时保存。每次间隔运行时,检查它是否足够长。如果它还没有时间,那就做吧。如果是时间,请清除间隔,以免再次发射。