setTimeout在我的循环javascript幻灯片函数中工作了一段时间，然后停止延迟
setTimeout works in my looping javascript slideshow functions for a while, then ceases to delay
我的幻灯片经历了几次迭代，但始终没有摆脱这个问题。它会像预期的那样运行一段时间，然后突然开始切换幻灯片，没有任何延迟。如果没有动画，它可能会以光速运行…
HTML: <!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=utf-8"/>
<meta name="Description" content="Calvary Chapel Chico is a non-denominational,Bible-believing church established to worship,glorify,and share the good news of our Lord and Savior,Jesus Christ." />
<title>Calvary Chapel Chico</title>
<!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold"/>-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="Top450">
<div id="TitleBar">
<div id="Logo"></div>
<h1>Calvary Chapel Chico</h1>
<a id="Login" href="">Login</a>
</div>
<div id="SlideShow">
<div id="Banner">
<div id="SMedia">Insert Media Links Here</div>
<div id="SMinistries">Insert Ministry links Here</div>
<div id="SServiceTimes">Insert Service Times Here</br><div style="background:#fff;">TEST</div></div>
<div id="SWelcome">Welcome to</br><span id="WelcomeText">Calvary Chapel Chico Online</span></div>
<a id="S5" href="2.html">2</a>
<a id="S6" href="2.html">3</a>
<a id="S7" href="2.html">4</a>
</div>
</div>
<div id="MenuBar">
<div class="Pages">
<a id="Home" href="2.html" class="current">Home</a>
<a id="About" href="2.html">About</a>
<a id="Media" href="#" rel="1" class="SlidePage">Media</a>
<a id="Ministries" href="#" rel="2" class="SlidePage">Ministries</a>
<a id="ServiceTimes" href="#" rel="3" class="SlidePage">Service Times & Directions</a>
</div>
<div class="BannerButtons">
<a href="#" rel="4"></a>
<a href="#" rel="5"></a>
<a href="#" rel="6"></a>
<a href="#" rel="7"></a>
</div>
</div>
</div>
<div id="Body">
<div id="Left300">
<div id="LeftTopTabs" class="Tabs">
<div id="LeftTopTabBar" class="TabBar">
<a href="#LTT-1">News</a>
<a href="#LTT-2">Media</a>
<a href="#LTT-3">Calendar</a>
</div>
<div id="LeftTopPanes" class="Panes">
<div id="LTT-1">Lorem ipsum dolor sit amet</div>
<div id="LTT-2">Nunc in tempor sem.</div>
<div id="LTT-3">Sed diam nisl,</div>
</div>
</div>
</div>
<div id="Right700">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="Bottom450">
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</html>
$(
function() {
//===================================================================================================================================
//Setup
//===================================================================================================================================
//Initialize variables
var Pause
var NextSlide
var RepeatTimer
var SlideshowTimer
var $CurrentSlide
//Slideshow setup
$(".BannerButtons a:first").addClass("current");//Force the first slide's button to be the "CurrentSlide"
$(".BannerButtons").show();
var SlideWidth=$("#SlideShow").width();
$("#Banner").css({'width':[SlideWidth*[$("#Banner>*").size()]]});
//Tabs setup
var $CurrentTab=$(".TabBar a:first").next();
//===================================================================================================================================
//Slideshow Functions
//===================================================================================================================================
//Move to the Next Slide
NextSlide=function(){
var image_reelPosition=[$CurrentSlide.attr("rel")-1]*SlideWidth;//Computes distance to the left edge of the slide in pixels
$(".BannerButtons a,.SlidePage").removeClass("current");//Make the old "CurrentSlide" no longer the "CurrentSlide"
$("#Banner").animate({left:-image_reelPosition},900);//Next slide animation
$CurrentSlide.addClass("current");//Make the new "CurrentSlide" current
};
//Repeat slide changes
RepeatTimer=function(){
$CurrentSlide=$('.BannerButtons a.current').next();//Make the next "CurrentSlide" current
if($CurrentSlide.length===0){$CurrentSlide=$('.BannerButtons a:first');};//If end of buttons is reached, go back to the beginning
NextSlide();//Go to the next slide
SlideshowTimer();
};
//Repeat slide changes every 10 seconds
SlideshowTimer=function(){
clearTimeout(Pause);//Clear the timer
Pause=setTimeout(RepeatTimer,10000);//Reset the timer
};
//Hover
$("#Banner").hover(
function(){//Hover trigger
clearTimeout(Pause);//Clear the timer
},function(){//Cease to hover trigger
Pause=setTimeout(RepeatTimer,2000);//Reset the timer
});
//Click
$(".BannerButtons a,.SlidePage").click(
function(){
$CurrentSlide=$(this);//Make the clicked object the "CurrentSlide"
clearTimeout(Pause);//Clear the timer
NextSlide();//Go to the clicked slide
SlideshowTimer();//Reset the timer
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Tab Functions
//===================================================================================================================================
//Move to the clicked tab
ChangeTab=function(){
$(".TabBar>a").removeClass("current");
$CurrentTab.addClass("current");//Force the first slide's button to be the "CurrentTab"
$CurrentPane=$($CurrentTab.attr("href"));
$(".Panes>div").addClass("HiddenPane");
$CurrentPane.removeClass("HiddenPane");
};
//Click
$(".TabBar>a").click(
function(){
$CurrentTab=$(this);//Make the clicked object the "CurrentSlide"
ChangeTab();//Go to the clicked tab
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Start Slide Show
SlideshowTimer();
//Initialize Tabs
ChangeTab();
//END
}
);
找到了!原来这是一个浏览器/Javascript问题。我没有意识到jQuery是如何在默认情况下将所有动画排队的。
首先，页面加载，一切正常。没有时间问题。然后我转到另一个标签，让我的页面打开。这就是它的由来。浏览器以某种方式锁定了jQuery，使其无法在需要时通过CSS更改动画(不是立即)。但与此同时，Javascript计时器仍在继续。一直以来，jQuery都在构建一个未执行的动画队列。当您重新打开选项卡时，浏览器让jQuery发挥它的作用，并开始连续运行所有排队的动画。此时，计时器脚本仍在运行，但它只能向队列添加更改。因此，定时器似乎失败了。
修复
我改变了:
$("#Banner").animate({left:-image_reelPosition},900);//Next slide animation
:
$("#Banner").stop().animate({left:-image_reelPosition},900);//Next slide animation
就是这样，jQuery知道构建队列对于某些动画来说是不可取的，所以它包含了一个修复。
我看到的一件事是，您在不知道Pause是否是有效和活动的timeid的情况下多次调用clearTimeout(Pause)。在许多情况下，您使用早已结束的旧timerID调用它(因此不再有效)。操作系统可以容忍，但这可能会导致一些问题。
通常，解决这个问题的方法是在定时器触发时将timerID变量设置为null，或者清除定时器，然后在调用clearartimeout之前检查是否为null。
另外，正如nnnnnn在评论中所说，将鼠标放在幻灯片上将使计时器时间从10秒降至2秒。如果你有一个2秒的动画，这将几乎是整个时间。
我建议创建一个用于设置幻灯片计时器和清除幻灯片计时器的功能，然后您可以集中管理计时器ID和计时器设置的时间。
我的猜测是，核心问题是2秒的问题悬停，但你应该清理你的timerID管理了
相关文章：
- Canvas+svg路径动画，在路径中的特定点暂停一段时间，然后继续
- 收集一段时间内的EMG数据.建议JS
- 在一段时间内切换文本
- 如何停止字幕文本一段时间，然后继续
- HTTP服务器在一段时间后停止(Node.js）
- Hammer.js过了一段时间就停止工作了
- Meteor-在一段时间内解锁模板(按日期）
- 画布在一段时间后开始滞后
- JS-在一段时间后水平移动图像
- Vanilla Js:在一个事件中开始一段时间的循环，然后用第二个事件打破它?('mouseover'启
- 淡入，然后使用css过渡淡出一段时间
- ng-hide 元素出现一段时间，然后隐藏
- 在页面首次加载时执行 jQuery 代码，然后在一段时间后加载
- 在页面加载后淡出对象一段时间，然后在淡出后运行另一组代码
- 如何在页面加载时隐藏图像，然后在一段时间后显示滑动
- 执行了一段时间的javascript/jquery函数，然后停止
- 使achor标记在一段时间内不可单击，然后再使其可单击
- oidc-client CheckSessionIFrame正确触发一次，然后每隔一段时间失败一次
- setTimeout在我的循环javascript幻灯片函数中工作了一段时间，然后停止延迟
- 使用jQuery覆盖内联CSS应用了一段时间，然后就消失了.为什么
