clearInterval 不会清除后台更改脚本中的间隔

Question

我有一个用淡入/淡出效果更改背景图像的小脚本：

/*controla la velocidad de la animación*/
    var slideshowSpeed = 1000;
    var transitionSpeed = 2000;
    var timeoutSpeed = 500;
    
    /*No tocar*/
    var interval;
    var activeContainer = 1;    
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        // Si ya estamos navegando, entonces no hacemos nada!
        if(animating) {
            return;
        }
        currentImg++;
        if(currentImg == photos.length + 1) {
            currentImg = 1;
        }
        // Tenemos dos, uno en el que tenemos la imagen que se ve y otro d?nde tenemos la imagen siguiente
        var currentContainer = activeContainer;
        // Esto puedo optimizarlo con la funci?n modulo, y cambiar 1 y 2 por 0 y 1-> active = mod2(active + 1)
        if(activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        // hay que decrementar el ?ndice porque empieza por cero
        cargarImagen(photos[currentImg - 1], currentContainer, activeContainer);
    };
    var currentZindex = -1;
    var cargarImagen = function(photoObject, currentContainer, activeContainer) {
        animating = true;
        // Nos aseguramos que el nuevo contenedor está siempre dentro del cajon
        currentZindex--;
        /*if(currentZindex < 0) currentZindex=1;*/
        // Actualizar la imagen
        $("#headerimg" + activeContainer).css({
            "background-image" : "url(" + photoObject + ")",
            "display" : "block",
            "z-index" : currentZindex
        });
        // FadeOut antigua
        // Cuando la transición se ha completado, mostramos el header 
        $("#headerimg" + currentContainer).fadeOut(transitionSpeed,function() {
            setTimeout(function() {
                
                animating = false;
            }, timeoutSpeed);
        });
    };
    
function iniciarPase(){
    var animating = false;
    //ver la siguente
     navigate("next");
    //iniciar temporizador que mostrará las siguientes
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
}
function pararPase(){
    var animating = true;
    console.log('paramos la animación');
    interval = clearInterval(interval);
}
/*Gestion de pase de imágenes de fondo*/
$(document).ready(function() {
    iniciarPase();
});

但是包含clearInterval表达式的函数pararPase()似乎不起作用，即使它位于<body onload="pararPase()">

知道我缺少什么吗？

Answer 1

您的基本逻辑工作正常，这是实时测试用例。

因此，您很可能错误地绑定了pararPase ，例如，当按钮尚不存在时，尝试在document.ready()之外绑定为单击处理程序 -更新了测试用例以证明这一点。

另一个选项是代码中的其他错误，请检查 Chrome JavaScript 控制台以查看是否是这种情况。

正如其他人在评论中提到的，将 clearInterval 的返回值分配回变量是没有意义的，但无害：变量将只有值“未定义”。

编辑：有可能iniciarPase调用iniciarPase ，这将导致不止一个计时器，只有最后一个会被清除。 因此，为了安全起见，将此添加到您的函数中：（这实际上是 Diode 在他的回答中试图说的）

function iniciarPase(){
    var animating = false;
    //ver la siguente
    navigate("next");
    //iniciar temporizador que mostrará las siguientes
    if (interval)
        clearInterval(interval);
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
}

Answer 2

clearInterval(interval);
interval = setInterval(function() {
   navigate("next");
}, slideshowSpeed);

clearInterval 不会清除后台更改脚本中的间隔

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-12-19 11:31:39

解决方案2
0 2011-12-19 11:43:30

clearInterval 不会清除后台更改脚本中的间隔

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-12-19 11:31:39

解决方案2 0 2011-12-19 11:43:30

解决方案1
2 已采纳 2011-12-19 11:31:39

解决方案2
0 2011-12-19 11:43:30