1. 首頁
  2. 問答
  3. clearTimeout（）不起作用

clearTimeout（）不起作用

2011-08-24 79 views
3

在以下代碼中，clearTimeout（）函數似乎不清除計時器。請注意：我已經將代碼剝離了一些以顯示相關部分。有任何想法嗎？clearTimeout（）不起作用

var Gallery = 
{ 

    next: function() 
    { 
    // does stuff 
    },  

    close: function() 
    { 
    Gallery.slideshow("off"); 
    }, 

    slideshow: function(sw) 
    { 
    if (sw == "off") {clearTimeout(timer);} 

    var timer = setTimeout(function() {Gallery.next();Gallery.slideshow();}, 1000); 
    }, 
};

全碼：

<!doctype html> 

<html> 
<head> 
<meta charset="utf-8"> 
<title>Gallery</title> 

<meta name="description" content=" "> 
<meta name="author" content=" "> 

<link rel="stylesheet" href="scripts/css.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<script> 

var Gallery = 
{ 

// PARAMETERS FOR CUSTOMISATION 

gallery_type: "overlay", // overlay(default), inpage, slideshow 
transition_speed: 1000,  // milliseconds 
outer_opacity: 0.7,   // 0 to 1 (option available with overlay) 
outer_colour: "#000000", // hex value 
image_size: "800px", 
show_captions: true,  // true, false 
overlay_slideshow: true, // true, false (option available with overlay) 
slideshow_interval: 5000, // milliseconds 
slideshow_controls: false, // true, false 
fullscreen: false,   // true, false (option available with inpage) 



thumbs: [], 
images: [], 
captions: [], 
current_image_id: null, 
timer: null, 



    init: function() 
    { 

    // CREATE ARRAYS 

    var gallery_div = document.getElementById("gallery"); 
    gallery_thumbs = gallery_div.getElementsByTagName("img"); 


    for (var i=0; i < gallery_thumbs.length; i++) 
    { 
    Gallery.thumbs[i] = gallery_thumbs[i]; 
    Gallery.thumbs[i].rel = [i]; 
    } 

    for (var i=0; i < gallery_thumbs.length; i++) 
    { 
    Gallery.captions[i] = Gallery.thumbs[i].alt; 
    } 


    // CREATE OVERLAYS 

    var body_tag = document.getElementsByTagName("body"); 
    var outer_overlay = document.createElement("div"); 
    outer_overlay.id = "outer"; 
    outer_overlay.style.backgroundColor = Gallery.outer_colour; 
    var window_height = $(document).height(); 
    outer_overlay.style.height = window_height +'px'; 
    body_tag[0].appendChild(outer_overlay); 
    var inner_overlay = document.createElement("div"); 
    inner_overlay.id = "inner"; 
    body_tag[0].appendChild(inner_overlay); 
    var close_button = document.createElement("img"); 
    close_button.src="images/icon-close.png"; 
    close_button.id = "gallery-close"; 
    inner_overlay.appendChild(close_button); 
    var next_button = document.createElement("img"); 
    next_button.src="images/icon-next.png"; 
    next_button.id = "gallery-next"; 
    inner_overlay.appendChild(next_button); 
    var prev_button = document.createElement("img"); 
    prev_button.src="images/icon-prev.png"; 
    prev_button.id = "gallery-prev"; 
    inner_overlay.appendChild(prev_button); 
    var caption_div = document.createElement("div"); 
    caption_div.id = "gallery-caption"; 
    inner_overlay.appendChild(caption_div); 

    $("#gallery-caption").fadeTo(0, 0); 
    if (Gallery.show_captions == true) { 
    inner_overlay.onmouseover = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed/2, 0.5);}; 
    inner_overlay.onmouseout = function() {$("#gallery-caption").stop().fadeTo(Gallery.transition_speed, 0);}; 
    } 

    // CREATE IMAGES 

    for (var i=0; i < Gallery.thumbs.length; i++) 
    { 
    var new_image = document.createElement("img"); 
    new_image.src = Gallery.thumbs[i].parentNode.href; 
    new_image.id= "gallery-img" + (i + 1); 
    inner_overlay.appendChild(new_image); 
    Gallery.images[i] = new_image; 
    $(Gallery.images[i]).fadeTo(0, 0); 
    } 


    // EVENT HANDLERS FOR OPEN AND CLOSE 

    for (var i=0; i < Gallery.thumbs.length; i++) 
    { 
    Gallery.thumbs[i].onclick = Gallery.open; 
    } 

    var outer_overlay = document.getElementById("outer"); 
    outer_overlay.onclick = Gallery.close; 
    close_button.onclick = Gallery.close; 
    next_button.onclick = Gallery.next; 
    prev_button.onclick = Gallery.previous; 

    }, 



    open: function() 
    { 


    Gallery.current_image_id = this.rel; 
    var current = Gallery.images[Gallery.current_image_id]; 
    var caption_div = document.getElementById("gallery-caption"); 
    caption_div.innerHTML = Gallery.captions[Gallery.current_image_id]; 


    var inner_overlay = document.getElementById("inner"); 
    inner_overlay.style.height = current.height + "px"; 

    // CENTER BUTTONS & OVERLAY 
    var next_button = document.getElementById("gallery-next"); 
    next_button.style.top = (current.height/2) -15 + "px"; 
    var prev_button = document.getElementById("gallery-prev"); 
    prev_button.style.top = (current.height/2) -15 + "px"; 
    $("#inner").css("top", (($(window).height()-$("#inner").height())/2)); 
    $("#inner").css("left", (($(window).width()-$("#inner").width())/2)); 


    $(current).fadeTo(0, 1); 
    $("#outer").fadeTo(0, Gallery.outer_opacity); 
    $("#inner").fadeTo(0, 0); 
    $("#inner").fadeTo(Gallery.transition_speed, 1); 

    if (Gallery.overlay_slideshow == true) { 
    Gallery.slideshow(); 
    } 


    return false; 

    }, 



    close: function() 
    { 

if (Gallery.timer) { 
      clearInterval(Gallery.timer); 
      Gallery.timer = null; 
     } else { 

    $("#outer").fadeTo(0, 0); 
    $("#inner").fadeTo(0, 0); 
    $("#outer").css("display", "none"); 
    $("#inner").css("display", "none"); 

    var current = Gallery.images[Gallery.current_image_id]; 
    current.style.display = "none"; 

    } 

    }, 



    next: function() 
    { 

    var next_id = Number(Gallery.current_image_id) + 1; 
    if (next_id == Gallery.images.length) {next_id = 0;} 
    var next = Gallery.images[next_id]; 
    var current = Gallery.images[Gallery.current_image_id]; 

    var inner_overlay = document.getElementById("inner"); 
    inner_overlay.style.height = next.height + "px"; 

    // CENTER BUTTONS & OVERLAY 
    var next_button = document.getElementById("gallery-next"); 
    next_button.style.top = (next.height/2) -15 + "px"; 
    var prev_button = document.getElementById("gallery-prev"); 
    prev_button.style.top = (next.height/2) -15 + "px"; 
    $("#inner").css("top", (($(window).height()-$("#inner").height())/2)); 
    $("#inner").css("left", (($(window).width()-$("#inner").width())/2)); 


    var caption_div = document.getElementById("gallery-caption"); 
    caption_div.innerHTML = Gallery.captions[next_id]; 


    $(current).fadeTo(Gallery.transition_speed, 0); 
    $(next).fadeTo(0, 0); 
    $(next).fadeTo(Gallery.transition_speed, 1); 

    Gallery.current_image_id = next_id; 

    }, 


    previous: function() 
    { 
    var prev_id = Number(Gallery.current_image_id) - 1; 
    if (prev_id == -1) {prev_id = Gallery.images.length -1;} 
    var prev = Gallery.images[prev_id]; 
    var current = Gallery.images[Gallery.current_image_id]; 

    var inner_overlay = document.getElementById("inner"); 
    inner_overlay.style.height = prev.height + "px"; 

    // CENTER BUTTONS & OVERLAY 
    var next_button = document.getElementById("gallery-next"); 
    next_button.style.top = (prev.height/2) -15 + "px"; 
    var prev_button = document.getElementById("gallery-prev"); 
    prev_button.style.top = (prev.height/2) -15 + "px"; 
    $("#inner").css("top", (($(window).height()-$("#inner").height())/2)); 
    $("#inner").css("left", (($(window).width()-$("#inner").width())/2)); 


    var caption_div = document.getElementById("gallery-caption"); 
    caption_div.innerHTML = Gallery.captions[prev_id]; 


    $(current).fadeTo(Gallery.transition_speed, 0); 
    $(prev).fadeTo(0, 0); 
    $(prev).fadeTo(Gallery.transition_speed, 1); 

    Gallery.current_image_id = prev_id; 
    }, 



    slideshow: function() { 
     Gallery.close(); 
     Gallery.timer = setInterval(function() { 
      Gallery.next(); 
     }, 1000); 
    }, 





    fullscreen: function() 
    { 

    } 




}; 


// START SCRIPTS 

Start = function() 
{ 
Gallery.init(); 
}; 

window.onload = Start; 



</script> 

</head> 
<body> 

<div id="gallery"> 
    <a href="images/argentina-river.jpg"><img src="images/thumbs/argentina-river-thumb.jpg" alt="Argentina River"></a> 
    <a href="images/monte-bre.jpg"><img src="images/thumbs/monte-bre-thumb.jpg" alt="Monte Bre"></a> 
    <a href="images/romania.jpg"><img src="images/thumbs/romania-thumb.jpg" alt="Romania"></a> 
    <a href="images/norway.jpg"><img src="images/thumbs/norway-thumb.jpg" alt="Norway"></a> 
    <a href="images/cloudy-skies.jpg"><img src="images/thumbs/cloudy-skies-thumb.jpg" alt="Cloudy Skies"></a> 
    <a href="images/field.jpg"><img src="images/thumbs/field-thumb.jpg" alt="Field"></a> 
    <a href="images/poland.jpg"><img src="images/thumbs/poland-thumb.jpg" alt="Poland"></a> 
    <a href="images/coconut-trees.jpg"><img src="images/thumbs/coconut-trees-thumb.jpg" alt="Coconut Trees"></a> 
    <a href="images/volcanic-land.jpg"><img src="images/thumbs/volcanic-land-thumb.jpg" alt="Volcanic Land"></a> 
    <a href="images/tokyo-city.jpg"><img src="images/thumbs/tokyo-city-thumb.jpg" alt="Tokyo City"></a> 
</div> 

</body> 
</html>

來源

2011-08-24 Chris

+1

停止順便說一句，你不應該把大括號在JavaScript中塊的下一行。在JavaScript中，*總是*把他們放在同一行。這不是一個風格問題，而是一個真正難以發現的錯誤。在這裏看到更多關於爲什麼你應該這樣做的信息：http://encosia.com/in-javascript-curly-brace-placement-matters-an-example/ –

回答

9

的clearTimeout工作，但你馬上再設置它在相同的方法。所以它馬上重新開始。你需要有條件地檢查是否啓動它：

slideshow: function(sw) { 
    var timer; 

    if (sw == "off") { 
     clearTimeout(timer); 
    } else { 
     timer = setTimeout(function() { Gallery.next(); }, 1000); 
    } 
}

來源

2011-08-24 09:54:24

+0

謝謝 - 這是一個很好的觀點，但是即使使用if else語句似乎沒有清除它出於某種原因 – Chris

+0

這是因爲你在調用'Gallery.slideshow（）;'不必要的定時器回調。整個方法有點糾結。我會在一分鐘後發佈一個新答案。 –

0

這將是因爲你清除它後重新設置超時。重新考慮你的代碼的順序。

來源

2011-08-24 09:54:57

0

每次調用幻燈片放映功能時，setTimeout都會獨立執行sw變量「關閉」或不執行。

slideshow: function(sw) 
    { 
    if (sw == "off") { 
     clearTimeout(timer); 
    } else { 
     var timer = setTimeout(function() {Gallery.next();Gallery.slideshow();}, 1000); 
    }

來源

2011-08-24 09:56:04

3

您構建代碼的方式比需要的更復雜，並且有一些錯誤。我建議這樣的重組是：

var Gallery = { 
    timer: null, 

    next: function() { 
     /* do stuff */ 
    }, 

    close: function() { 
     if (Gallery.timer) { 
      clearInterval(Gallery.timer); 
      Gallery.timer = null; 
     } 
    }, 

    slideshow: function() { 
     Gallery.close(); 
     Gallery.timer = setInterval(function() { 
      Gallery.next(); 
     }, 1000); 
    } 
}

你會先Gallery.slideshow();開始播放幻燈片，並與Gallery.close();

來源

2011-08-24 10:12:46

+0

謝謝Ben，我會試試這個:-) – Chris

+0

這種方法似乎打破了腳本的其他部分。另外，除非我錯過了什麼，沒有什麼可以回想起幻燈片放映功能，以便它重複。 – Chris

+0

@克里斯，對不起。我將'setTimeout'與'setInterval'混淆了。我更新了我的代碼來解決這個問題。這就是重複的原因。 –

相關問題

 相關問題