setInterval（）関数を一定時間停止する

Question

私はsetInterval（）関数でタイマーを一時停止する方法を見つけようとしています。私はバナーを回転させるためにそれを使用しています。サムネイルをクリックすると「タイマーをリセット」するか、特定の画像に長く滞在したいと思います。

私はすでにクリック設定のイベントハンドラを持っています。

：

は、これは私がこれまで持っているものである（注：簡略化のために除外他のコード）

//Set interval of fade effect 
setInterval("bannerRotate()", 7000); 

//Click function for banner thumbnails 
$('#banner ul li .banner_thumb').click(function(){ 

    $('#banner ul li .banner_thumb').parent().removeClass("selected"); 
    $(this).parent().addClass("selected"); 
    //this is where I tried to make it wait but obviously this didn't work 
    setTimeout("bannerRotate()", 10000);  

}); 

任意の提案/ヘルプは素晴らしいことです！ :)

Answer 1

var timeoutId = 0; 

function startCountdown() { 
    timeoutId = setTimeout(function() { 
     bannerRotate(); 
    }, 7000); 
} 

function bannerRotate() { 
    ... 
    startCountdown(); // Otherwise it will just run once 
} 

$('#banner ul li .banner_thumb').click(function(){ 
    $('#banner ul li .banner_thumb').parent().removeClass("selected"); 
    $(this).parent().addClass("selected"); 

    // Clear the existing timeout then restart after 10 seconds 
    clearTimeout(timeoutId); 

    setTimeout(function() { 
     startCountdown(); 
    }, 10000);  
}); 

Answer 2

これはいかがですか？

//Set interval of fade effect 
var timer = setInterval(bannerRotate, 7000); 

//Click function for banner thumbnails 
$('#banner ul li .banner_thumb').click(function(){ 

    $('#banner ul li .banner_thumb').parent().removeClass("selected"); 
    $(this).parent().addClass("selected"); 

    // if you already have a timer running, kill it 
    if (timer) { 
     clearTimeout(timer); 
    } 

    // now re-bind the setTimeout to timer with a new delay 
    timer = setTimeout(bannerRotate, 10000); 
}); 

---

あなたが「一時停止」のタイマーをしたい場合さて、これはより多くのあなたが望むもののように、おそらくです：

var delayFor = 0, normalDelay = 7000, timer; 
function bannerRotate() { 
    if (delayFor) { 
     if (timer) { 
      clearTimeout(timer); 
     } 

     timer = setTimeout(function() { 
      delayFor = 0; 
      timer = setInterval(bannerRotate, normalDelay); 
     }, delayFor); 
    } 

    // normal bannerRotate code here 
} 

//Set interval of fade effect 
timer = setInterval(bannerRotate, normalDelay); 

//Click function for banner thumbnails 
$('#banner ul li .banner_thumb').click(function(){ 
    $('#banner ul li .banner_thumb').parent().removeClass("selected"); 
    $(this).parent().addClass("selected"); 

    // extend the current delay time by 3 seconds 
    delayFor = 3000; 
}); 

Answer 3

簡単な可能性がフラグを設定し、持っていますbannerUpdate関数は実際に更新するかどうかを判断する前にそれを見ます。

Answer 4

はsetTimeoutの代わりsetIntervalを使用してbannerRotate関数の最後で、それを更新するために考えてみましょう：

var timer = setTimeout("bannerRotate()", 7000); 

$('#banner ul li .banner_thumb').click(function() { 

    $('#banner ul li .banner_thumb').parent().removeClass("selected"); 
    $(this).parent().addClass("selected"); 
    //this is where I tried to make it wait but obviously this didn't work 
    clearTimeout(timer); 
    setTimeout("bannerRotate()", 10000); 

}); 

function bannerRotate() { 
    //..your code 
    timer = setTimeout("bannerRotate()", 7000); 
}