在幻灯片上使用 prev next 时重置计时器答案

【问题标题】：Reset timer when using prev next on a slideshow在幻灯片上使用 prev next 时重置计时器
【发布时间】：2015-07-28 09:47:48
【问题描述】：

我有一个带有两张幻灯片的幻灯片。每张幻灯片在更改前保持 5-6 秒，但是当我使用 prev next 按钮时效果不佳。不知何故，它保留了原始计时器（来自自动幻灯片），所以当我选择“下一张”时，例如在转换前 1 秒，下一张幻灯片将只停留一秒。因此，当我选择下一步时，它不会重置计时器，而是保留原始计时器。

所以最后我想在 prev next 函数中重置计时器（或者如果您有任何其他想法将不胜感激）。

这是JS：

"use strict";

var currentSlide = 1;
var transition = 1000;
var slideLength = 2;
var slideInter = 6000;

$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);

$(".next").click(function () {
    nextSlide();
});

$(".prev").click(function () {
    prevSlide();
});

function nextSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide++;
    if (currentSlide > slideLength) 
        currentSlide = 1;
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

function prevSlide() {
    $(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
    currentSlide--;
    if (currentSlide < 1)
        currentSlide = 2;

    $(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}

   //UPDATED CODE   


var timer = setInterval(nextSlide, slideInter);

function resett() {
  clearInterval(timer);}

function timing () {
  timer = setInterval(nextSlide, slideInter);}

$(".slider").hover(resett,timing);

如果您需要任何其他信息，或者您对我所说的内容有什么不明白的地方，请告诉我。

【问题讨论】：

标签： javascript jquery slideshow

【解决方案1】：

看起来您的计时器和 clearInterval 是在“悬停”下声明和管理的，并且在您触发 nextSlide 或 prevSlide 时不会被调用。尝试将其声明为单独的全局函数，然后在 nextSlide 或 prevSlide 函数中调用它，以便在运行时相应地重置计时器。

【讨论】：

我猜是这样的？：（我应该在哪里打电话给我的他们？）你能帮我解决这个问题吗？ var timer = setInterval(nextSlide, slideInter); function resett() { clearInterval(timer);} function timing () { timer = setInterval(nextSlide, slideInter);} $(".slider").hover(resett,timing);

【解决方案2】：

您是否尝试过自调用递归函数？这可能是一个不错的解决方法。

类似这样的：

var isBeingHovered = false;
$('.slider').hover(function(){
  isBeingHovered = true;
}, function(){
  isBeingHovered = false;
  setTimeout(timerFunction, slideInter); //Optional. Resume when stops hovering.
});

(function timerFunction(){
  nextSlide();
  if(isBeingHovered === true)
    setTimeout(timerFunction, slideInter);
})()

【讨论】：

@Unihedron 已修复。我实际上希望它的工作方式有所不同，并且忘记在重新实现代码之前进行更改。
不，它不是“固定的”，因为 undefined 在布尔语句中被视为假。
@Unihedron 你将如何使这个变量未定义？但我还是修好了那个。
感谢您的帮助。我试过了，但问题是这实际上对下一个 prev 函数没有帮助。我想要的是在 prev next 函数中重置计时器，所以当我点击 next 或 prev 按钮时，计时器将重置。