Question

我正在创建一个图像旋转器，它循环显示两个带有漂亮交叉渐变的图像。我使用setInterval来执行此操作 - 但出于性能原因，我想在调整浏览器大小时停止计时器。

首先我定义函数和全局处理程序：

var imageRotator;
var getImageRotator = function() {
    if (imageRotator)
        clearInterval(imageRotator); // <-- not working it would seem?
    setInterval(function() {
        $('.imageRotator').animate({opacity: ($('.imageRotator').css("opacity") == 1) ? 0 : 1}, 500);
    }, 9000);
};

然后在$(document).ready()和$(window).smartResize()我做：

imageRotator = getImageRotator();

它以9秒的间隔启动它，但每次我调整浏览器的大小时，它都会添加一个新的计时器，它会不断地开始交叉渐变。

我哪里错了？

Answer 1

你没有从getimageRotatorFunction（）

返回

var imageRotator;
var getImageRotator = function() {
    if (imageRotator)
        clearInterval(imageRotator); // <-- not working it would seem?
    return setInterval(function() {
        $('.imageRotator').animate({opacity: ($('.imageRotator').css("opacity") == 1) ? 0 : 1}, 500);
    }, 9000);
};

现在你可以简单地做到这一点

imageRotator = getImageRotator();

Answer 2

如果您执行了imageRotator = getImageRotator();，则需要从getImageRotator函数返回计时器。 return方法缺少setInterval语句：

var imageRotator;
var getImageRotator = function() {
    if (imageRotator) {
        clearInterval(imageRotator); // <-- not working it would seem?
        return setInterval(function() {
            $('.imageRotator').animate({opacity: ($('.imageRotator').css("opacity") == 1) ? 0 : 1}, 500);
        }, 9000);
    }
};

Answer 3

您实际上并没有清除间隔。

你需要实际设置一个imageRotatorInterval，然后清除它。如下所示：

var imageRotator;
var imageRotatorInterval;
var getImageRotator = function() {
    if (imageRotator)
        clearInterval(imageRotatorInterval); 
    imageRotatorInterval = setInterval(function() {
        $('.imageRotator').animate({opacity: ($('.imageRotator').css("opacity") == 1) ? 0 : 1}, 500);
    }, 9000);
};

Answer 4

你忘记了id 让简单回归并使用它：

var getImageRotator = function() {
    if (imageRotator)
        clearInterval(imageRotator); // <-- not working it would seem?
    return setInterval(function() {
        $('.imageRotator').animate({opacity: ($('.imageRotator').css("opacity") == 1) ? 0 : 1}, 500);
    }, 9000);
};
var imageRotator = getImageRotator();

clearInterval不会破坏setInterval计时器

4 个答案: