Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Anwendungsbeispiele von Timern in JavaScript
Ausführliche Erläuterung der Anwendungsbeispiele von Timern in JavaScript
- 黄舟Original
- 2017-11-18 14:11:541903Durchsuche
In unserem vorherigen Artikel haben wir Ihnen die Prinzipien von Timer in JavaScript vorgestellt. Ich glaube, dass viele Leute jetzt ein besseres Verständnis für die Funktionsweise von JavaScript-Timern haben Wir kennen das Prinzip. Lassen Sie uns Ihnen die Verwendung von Timern in JavaScript vorstellen!
In Javascript gibt es zwei spezielle Funktionen für Timer, nämlich:
1. Countdown-Timer:
timename=setTimeout("function();",delaytime);2. Schleifentimer:
timename=setInterval("function();",delaytime);Der erste Parameter „function()“ ist die Aktion, die ausgeführt werden soll, wenn der Timer ausgelöst wird. Dabei kann es sich um eine Funktion oder mehrere Funktionen handeln , getrennt durch „;“. Wenn Sie beispielsweise zwei Warnfenster anzeigen möchten, können Sie „function();“ durch „alert(‘First warning window!‘); warning(‘Second warning window!‘);“ ersetzen Der zweite Parameter „Verzögerungszeit“ ist die Intervallzeit in Millisekunden, d. h. die Eingabe von „5000“ bedeutet 5 Sekunden.
Der Countdown-Timer löst ein Ereignis aus, nachdem die angegebene Zeit erreicht ist, während der Schleifen-Timer das Ereignis wiederholt auslöst, wenn das Intervall erreicht ist. Der Unterschied zwischen den beiden besteht darin, dass ersterer nur einmal funktioniert, während letzterer kontinuierlich funktioniert.
Nachdem Sie beispielsweise eine Seite geöffnet haben und alle paar Sekunden automatisch zu einer anderen Seite springen möchten, müssen Sie den Countdown-Timer „setTimeout(“function();“,delaytime)“ verwenden Stellen Sie einen Satz so ein, dass jeweils ein Wort angezeigt wird.
erfordert die Verwendung des Schleifentimers „setInterval(“function();“,delaytime)“.
document.activeElement.id. Verwenden Sie if, um festzustellen, ob document.activeElement.id und die ID des Formulars identisch sind. Zum Beispiel: Wenn ("mid" == document.activeElement.id) {alert();}, ist "mid" die ID, die dem Formular entspricht.
wird verwendet, um ein Programm anzugeben, das nach einer bestimmten Zeitspanne ausgeführt werden soll.
setTimeout("function", time) legt ein Timeout-Objekt
expression. setInterval("function",time) setzt ein Timeout-Objekt
SetInterval wird automatisch wiederholt und setTimeout wird nicht wiederholt.
clearTimeout(object) löscht das setTimeout-Objekt
clearInterval(object) löscht das setInterval-Objekt
Nur zwei Beispiele.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var str = "这个是测试用的范例文字";
var seq = 0;
var second=1000; //间隔时间1秒钟
function scroll() {
msg = str.substring(0, seq+1);
document.getElementByIdx_x_x('word').innerHTML = msg;
seq++;
if (seq >= str.length) seq = 0;
}
</script>
</head>
<body onload="setInterval('scroll()',second)">
<p id="word"></p><br/><br/>
</body>
</html>Der Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript" type="text/javascript">
var second=5000; //间隔时间5秒钟
var c=0;
function scroll() {
c++;
if ("b" == document.activeElement.id) {
var str="定时检查第<b> "+c+" </b>次<br/>";
if(document.getElementByIdx_x_x('b').value!=""){
str+="输入框当前内容为当前内容为<br/><b> "+document.getElementByIdx_x_x('b').value+"</b>";
}
document.getElementByIdx_x_x('word').innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="b" name="b" style="height:100px; width:300px;" onfocus="setInterval('scroll()',second)"></textarea><br/><br/>
<p id="word"></p><br/><br/>
</body>
</html>Der Code lautet wie folgt:
Beispiel 4: Countdown-Zeitsprung<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function count() {
document.getElementByIdx_x_x('m').innerHTML="计时已经开始！";
setTimeout("alert('十秒钟到！')",10000)
}
</script>
<body>
<p id="m"></p>
<input TYPE="button" value=" 计时开始" onclick="count()">
</body>
</html>
Der Code lautet wie folgt:
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'ds04.jsp' starting page</title>
<span id="tiao">3</span>
<a href="javascript:countDown"> </a>秒后自动跳转……
<meta http-equiv=refresh content=3;url= '/ds02.jsp'/>
<!--脚本开始-->
<script language="javascript" type="">
function countDown(secs){
tiao.innerText=secs;
if(--secs>0)
setTimeout("countDown("+secs+")",1000);
}
countDown(3);
</script>
<!--脚本结束-->
</head>Der Code lautet wie folgt:
Beispiel 7:<head>
<meta http-equiv="refresh" content="2;url='b.html'">
</head>Der Code lautet wie folgt:
Beispiel 8:<script language="javascript" type="text/javascript">
setTimeout("window.location.href='b.html'", 2000);
//下面两个都可以用
//setTimeout("javascript:location.href='b.html'", 2000);
//setTimeout("window.location='b.html'", 2000);
</script>Der Code lautet wie folgt:
<span id="totalSecond">2</span>
<script language="javascript" type="text/javascript">
var second = document.getElementByIdx_x('totalSecond').innerHTML;
if(isNaN(second)){
//……不是数字的处理方法
}else{
setInterval(function(){
document.getElementByIdx_x('totalSecond').innerHTML = --second;
if (second <= 0) {
window.location = 'b.html';
}
}, 1000);
}
</script>JS-Timer (einmal ausführen, Ausführung wiederholen)Teilen Sie einen Teil des JS-Codes , ein kleines Beispiel für einen JS-Timer, unterteilt in Timings für die einmalige Ausführung und den Timer für die wiederholte Ausführung. Als Referenz für Anfänger.
1. Der Code des Timers
, der nur einmal ausgeführt wird, lautet wie folgt:
2. Der Code des Timers<script>
//定时器 异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
</script>die wiederholt ausgeführt wird, lautet wie folgt:
Hinweis:<script>
function hello(){
alert("hello");
}
//重复执行某个方法
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1);
</script>Wenn es zwei Methoden auf einer Seite gibt, werden beide nach dem Laden der Seite ausgeführt, scheitern jedoch tatsächlich daran Nacheinander ausgeführt, können Sie auf die folgenden Methoden zurückgreifen, um das Problem zu lösen:
Sie können der Onload-Methode einen Timer hinzufügen, einen Timer festlegen und ihn vor der Ausführung um einen bestimmten Zeitraum „verzögern“. Wird berücksichtigt, um die Reihenfolge der Seitenlade- und Ausführungsmethoden zu unterscheiden.
Der Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var YC = new Object();
function beginYC()
{
var secondsYC = document.getElementById("txtYCSeconds").value;
try
{
YC = setTimeout("alert('延迟"+secondsYC+"秒成功')",secondsYC*1000);
}
catch(e)
{
alert("请输入正确的秒数。");
}
}
function overYC()
{
clearTimeout(YC);
YC=null;
alert("终止延迟成功。");
}
/**************************↓↓↓↓定时器的使用↓↓↓↓********************************/
var timerDS = new Object();
var timerDDS = new Object();
function beginDS()
{
sn.innerHTML = "0";
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function goonDS()
{
timerDS = setInterval("addOne()",parseInt(document.getElementById("txtIntervalSeconds").value,10)*1000);
}
function overDS()
{
clearInterval(timerDS);
timerDS=null;
}
function delayDS()
{
overDS();
timerDDS = setTimeout("goonDS()",document.getElementById("txtDDSSeconds").value*1000);
}
function addOne()
{
if(sn.innerHTML=="10")
{
overDS();
alert("恭喜你，已成功达到10秒");
return;
}
sn.innerHTML=parseInt(sn.innerHTML,10)+1;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
延迟器的使用：</p>
<p>
<label id="Label2" title="延迟秒数："></label>
<input type="text" id="txtYCSeconds" value="3" />
<input type="button" id="btnBYC" onclick="javascript:beginYC()" value="开始延迟" />
<input type="button" id="btnOYC" onclick="javascript:overYC()" value="终止延迟" />
<input type="button" id="Button1" onclick="javascript:alert('good monrning');" value="普通弹窗" />
</p>
<br />
<p>
定时器的使用：</p>
<p>
<p id="sn">0</p>
<label id="Label1" title="定时间隔秒数："></label>
<input type="text" id="txtIntervalSeconds" value="1" />
<input type="button" id="btnBDS" onclick="javascript:beginDS()" value="启动定时" />
<input type="button" id="btnODS" onclick="javascript:overDS()" value="终止定时" />
<input type="button" id="btnGDS" onclick="javascript:goonDS()" value="继续定时" />
<label id="ds" title="延迟秒数："></label>
<input type="text" id="txtDDSSeconds" value="5" />
<input type="button" id="btnDDS" onclick="javascript:delayDS()" value="延迟定时" />
</p>
</form>
</body>
</html>Zusammenfassung: Wir haben im vorherigen Artikel unten etwas über JavaScript gelernt Das Prinzip des Timers und basierend auf der Einführung in die Verwendung in diesem Artikel glaube ich, dass jeder die Verwendung des Timers in JavaScript beherrschen kann. Ich hoffe, dass es für Ihre Arbeit hilfreich sein wird!
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsbeispiele von Timern in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse