4

ボタンをクリックした後にJavascript関数を呼び出し、1,5秒間100ミリ秒ごとにループさせてから一時停止したい。

アイデアは、このカスタム jQuery スクロールバーを使用して、このアコーディオン スライダーにスクロール可能なコンテンツを表示できるようにすることです (他に優れたカスタム クロスブラウザー スクロールバーはありません)。

ユーザーが項目の 1 つをクリックするたびに、この関数を使用してスクロールバーを再構築する必要があります。

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

トランジションをスムーズに実行するために、以下の例のように setInterval を使用しました。

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

問題は、スクリプトが非常に多くのリソースを消費することです。これを 100 ミリ秒ごとに実行する必要はありません。ユーザーが 1 つのラジオ ボタンをクリックした後にのみ、100 ミリ秒ごとに 1.5 秒間実行したいと考えています。

ここで別の問題が発生します。アコーディオン スライダーはラジオ ボタンを使用して構築されているため、ラジオ ボタンのクリック時に JavaScript 関数を呼び出す方法は?

setTimeout と setInterval をタグに挿入しました。これは、これら 2 つの組み合わせを使用する必要があると考えているためです。必要な構成要素がすべて揃っていれば、ここで時間を無駄にすることはありません。

4

1 に答える 1

8

これを考えると：

ボタンをクリックした後にJavascript関数を呼び出し、1,5秒間100ミリ秒ごとにループさせてから一時停止したい。

これでうまくいくはずです：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 を保存することです。また、開始時に保存します。間隔が実行されるたびに、十分な長さであるかどうかを確認します。まだ時間がない場合は、それを行います。時間になったら、間隔を空けて再発火しないようにします。

于 2013-07-02T21:20:50.067 に答える