このチュートリアルに従ってJavaScriptで回転バナーを作成しようとしたときに、パズルに遭遇しました。
すべての画像は、で一定の間隔で表示されましたsetTimeout。後で、ユーザーがバナーの次の画像に手動で切り替えることができるボタンを追加したいので、clearTimeout最初に自動切り替えのタイマーを停止し、手動切り替え後にリセットするために使用すると思いました。しかし、元のタイマーをリセットする前に適切に停止するために、2回呼び出す必要がclearTimeoutあるという事実に混乱しました。clearTimeout一度呼び出すと、タイマーを正しく停止できませんでした。誰かが私にそのようなケースがある理由を説明するのを手伝ってもらえますか？私のコードに何か問題がありますか？以下はコードの一部です：
//Global Variables
var switchTimeout;
myBanner = new Array("img/chicken.jpg", "img/tiger.jpg", "img/pig.jpg");
var bannerCounter = 0;
//Called after the page is loaded
function switchBanner() {
if (document.images) {
bannerCounter++;
if (bannerCounter == myBanner.length) {
bannerCounter = 0;
}
document.getElementById("banner").src = myBanner[bannerCounter];
switchTimeout = setTimeout("switchBanner()",3000);
}
}
//Called when user hits the button
function manualSwitch() {
//Why do I need to call this twice for it to work?
clearTimeout(switchTimeout);
clearTimeout(switchTimeout);
if (document.images) {
bannerCounter++;
console.log(bannerCounter);
if (bannerCounter == myBanner.length) {
bannerCounter = 0;
}
document.getElementById("banner").src = myBanner[bannerCounter];
//Reset the timer now
switchTimeout = setTimeout("switchBanner()",3000);
}
}
ご協力いただき誠にありがとうございます！
私はこれをテストしましたが、1回だけ呼び出すだけで問題なく動作するようですが、これはのsetInterval()代わりに使用する方が適しているようですsetTimeout()。また、不要なコードの繰り返しを減らします。
img'sを置き換える代わりにテキストのみを使用する例を参照してくださいsource。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="banner"> </div>
<button onclick="changeAndTriggerInterval()" id="bannerSwitcher">Switch Banner</button>
<script>
let intervalIdentifier = 0;
let bannerCounter = 0;
myBanner = new Array("img/chicken.jpg", "img/tiger.jpg", "img/pig.jpg");
// Called when user hits the button and on initial page load
function changeAndTriggerInterval() {
changeBanner();
resetBannerChanger();
}
function resetBannerChanger() {
if (intervalIdentifier > 0) {
clearInterval(intervalIdentifier);
}
intervalIdentifier = setInterval(changeBanner, 3000);
}
function changeBanner() {
// Change before updating counter to start from index 0
document.getElementById("banner").innerText = myBanner[bannerCounter];
bannerCounter++;
if (bannerCounter == myBanner.length) {
bannerCounter = 0;
}
}
window.onload = changeAndTriggerInterval;
</script>
</body>
</html>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加