javascript - clearTimeout() 不工作

coder 2025-02-07 原文

在下面的代码中，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>

最佳答案

clearTimeout 正在工作，但您立即用相同的方法重新设置它。所以它会立即再次启动。您需要有条件地检查是否启动它:

slideshow: function(sw) {
    var timer;

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

关于javascript - clearTimeout() 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7173419/

clearTimeout javascript 34 Gallery images object syntax literals

有关javascript - clearTimeout() 不工作的更多相关文章

ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2
在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2
使用Ruby1.9.2运行IDE提示说需要gemruby-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall
ruby - `rescue $!` 是如何工作的？ - 2
我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的
ruby - File.read ("| echo mystring") 是如何工作的？ - 2
我在我正在处理的一些代码中发现了这一点。它旨在解决从磁盘读取key文件的要求。在生产环境中，key文件的内容位于环境变量中。旧代码:key=File.read('path/to/key.pem')新代码:key=File.read('|echo$KEY_VARIABLE')这是如何工作的？最佳答案来自IOdocs:Astringstartingwith“|”indicatesasubprocess.Theremainderofthestringfollowingthe“|”isinvokedasaprocesswithappro
ruby - 这个 ruby 注入(inject)魔术是如何工作的？ - 2
我今天看到了一个ruby代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？最佳答案没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem
ruby-on-rails - attr_accessible 在 Rails 中如何工作？ - 2
我刚刚有一个关于RubyonRails和模型(Rails3)中的attr_accessible属性的一般性问题。有人可以解释应该在那里定义哪些模型属性吗？我记得一些关于批量分配风险的事情，虽然我在这方面不太了解......谢谢:) 最佳答案想象一个带有一些字段的订单类:Order.new({:type=>'Corn',:quantity=>6})现在假设订单也有折扣代码，比如:price_off。您不想将:price_off标记为attr_accessible。这会阻止恶意代码制作最终会执行如下操作的帖子:Order.new({:

javascript - clearTimeout() 不工作

有关javascript - clearTimeout() 不工作的更多相关文章

随机推荐