每隔x秒调用一次Javascript函数，并在y秒后停止？ [英] Call a Javascript function every x seconds and stop after y seconds?

问题描述

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

I want to call a Javascript function after clicking a button, make it loop every 100 milliseconds for 1,5 seconds and then pause it.

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

The idea is that I want to make this accordion slider able to show scrollable content using this custom jQuery scrollbar(I have no idea of any other better custom cross-browser scrollbar).

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

The scrollbar must be reconstructed with this function every time the users clicks one of the items, using this:

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

为了使转换运行顺利，我用过setInterval如下例所示：

In order to make the transition run smooth I've used setInterval as in the example below:

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

问题是该脚本非常耗费资源。没有必要每100毫秒运行一次。我想让它每隔100毫秒运行一次，持续1.5秒仅在用户点击之后在一个单选按钮上。

The problem is that the script is very resource consuming. There is no need to run this every 100 milliseconds. I want to make it run every 100 milliseconds for 1,5 seconds only after the users click on one radio button.

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

Here comes another problem. Since the accordion slider is built using radio buttons, how to call javascript functions on radio buttons click?

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

I have inserted setTimeout and setInterval into the tags because I believe I have to use a combination of those 2. If I had all the necessary building blocks I wouldn't be here wasting your time.

推荐答案

鉴于此：

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

I want to call a Javascript function after clicking a button, make it loop every 100 milliseconds for 1,5 seconds and then pause it.

这应该这样做： 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。您也可以在开始时保存。每次间隔运行时，检查它是否足够长。如果它还没有时间，那就做吧。如果是时间，请清除间隔，以免再次开火。

The strategy is to start the interval when you click the button, and you save that interval id. You also save when you started. Each time the interval runs you check to see if it's been long enough. If its not yet time, do the thing. If it is time, clear the interval so it won't fire again.

这篇关于每隔x秒调用一次Javascript函数，并在y秒后停止？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！