カウントダウンとキャンセルオプションを使用してJavascriptでページをリダイレクト

Question

5秒カウントダウンでページをリダイレクトしようとしていますが、ユーザーはcountdwnをキャンセルしてページに留まることができます。ここに私のHTMLは

<form name="redirect"> 
<center> 
<font face="Arial"><b>You will be redirected to the script in<br><br> 
<form> 
<input type="text" size="3" name="redirect2"> 
</form> 
seconds</b></font> 
</center> 

。ここではJavaScript

var targetURL="http://javascriptkit.com"; 

var countdownfrom=10; 


var currentsecond=document.redirect.redirect2.value=countdownfrom+1; 
function countredirect(){ 
if (currentsecond!=1){ 
currentsecond-=1; 
document.redirect.redirect2.value=currentsecond; 
} 
else{ 
window.location="WWW.google.com"; 
return; 
} 
setTimeout("countredirect()",1000) 
} 

countredirect(); 

。注：私は実際にポップアップボックスにし、それをやってみたかったキャンセルボタンが

Answer 1

あなたはてclearTimeout（）

を使用することができます

HTML：

<form name="redirect"> 
<center> 
<font face="Arial"><b>You will be redirected to the script in<br><br> 
<input type="text" size="3" name="redirect2"> 
<input type="button" id="CancelButton" value="Cancel" onclick="javascript:cancelRedirect();" > 
seconds</b></font> 
</center> 
</form> 

JS：

var targetURL="http://javascriptkit.com"; 

var countdownfrom=10; 
var timeoutHandler; 
var currentsecond=document.redirect.redirect2.value=countdownfrom+1; 

function countRedirect(){ 
    if (currentsecond!=1){ 
     currentsecond-=1; 
     document.redirect.redirect2.value=currentsecond; 
    } 
    else{ 
     window.location="http://www.google.com"; 
     return; 
    } 
    timeoutHandler = setTimeout(countRedirect,1000) 
} 

function cancelRedirect(){ 
    clearTimeout(timeoutHandler); 
} 
countRedirect(); 

Answer 2

あなたのコードは絶対に不条理です。なぜ毎秒カウントダウンして別のカウントダウンを開始するのですか？あなただけのx秒タイマーを設定し、いつでも好きなときに、それをクリアすることができ、コードのワークフローが完全に不要である：

var countdown = setTimeout(redirect, redirectTime) 

は機能「リダイレクト」を呼び出してタイムアウトを設定した時間「redirectTime」一度経過しています。

あなたは自分のリダイレクト機能を定義する必要があります。

var newLocation = “...” 
function redirect(){ 
    window.location = newLocation 
} 

そして今、あなたはこれでタイマーをクリアすることができます：

ユーザーがボタンをクリックするか、ないものは何でもするときにバインドすることができ

function clearCountdown(){ 
    clearTimeout(countdown) 
} 

あなたは欲しい。

あなたはjQueryのビットを追加した場合：

$(document).ready(function(){ 
    var countdown = setTimeout(redirect, redirectTime) 
} 

そして...

$(“#myButton”).click(clearCountdown) 

注：あなたのコードとワークフローをシンプルに。 DRY（自分自身を繰り返さないでください）と "シンプルがより複雑です"（この最後のものはPythonの哲学のレシピからです:)