setInterval 无限循环动画中存在的问题

发表于 | 更新于 | 分类于

最近在做公司的官网，首页用到了一些循环播放的动画，类似于轮播图。之前一般是直接套用插件，不常手动自己做这种，但是为了避免引入第三方库导致网页过于臃肿，所以就凭着自己掌握的 setTimeout 和 setInterval 的一些简单的知识就开始了制作。

要求：五个 div 依次切换。间隔3s

我的第一个想法是：每一个循环作为一个函数，每15s循环一次。
于是我的代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var $el = $('#animat-icon ul');
var $elText = $('.animat-text');
var n = $('#animat-icon ul li').length;

//渐隐切换
function firstAnimat() {
    for (var i = 0; i < n; i++) {
        (function(i) {
            setTimeout(function() {
                if (i != 0) {
                    $el.find('li').eq(i - 1).removeClass('fade');
                    $elText.eq(i - 1).removeClass('fade');
                } else {
                    $el.find('li').eq(n - 1).removeClass('fade');
                    $elText.eq(n - 1).removeClass('fade');
                }
                $el.find('li').eq(i).addClass('fade');
                $elText.eq(i).addClass('fade');
            }, 3000 * i)
        })(i)
    }
}

//不等待
firstAnimat();
setInterval(function() { firstAnimat() }, 3000 * n);

fade用于表现css3的动画，渐隐渐现啥的。
写完看了一眼效果实现了，并且我用到了面试的时候被问到的闭包的问题，我还自我感觉很良好。

然后问题就出现了，当离开当前标签页一段时间之后再回来，所有的文字重叠在了一起，然后依次迅速的执行了fade定义的动画。我的第一想法是浏览器出于性能考虑，停止了我的动画。

这个原因可能是对的吧，因为没有人说的清楚是怎么回事儿。

百度之：
有人说：

DOM的操作也是消耗时间的，DOM的操作不顺，卡了下，时间就不对了，所以那样不是很稳定。

后面我改成了这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var $el = $('#animat-icon ul');
var $elText = $('.animat-text');
var n = $('#animat-icon ul li').length;
var index = 0;

var timer;

//渐隐切换
function firstAnimat() {
    if (index != 0) {
        $el.find('li').eq(index - 1).removeClass('fade');
        $elText.eq(index - 1).removeClass('fade');
    } else {
        $el.find('li').eq(n - 1).removeClass('fade');
        $elText.eq(n - 1).removeClass('fade');
    }
    $el.find('li').eq(index).addClass('fade');
    $elText.eq(index).addClass('fade');

    index += 1;
    if(index>=n){
        index = 0;
    }
}

start();

function start(){
    firstAnimat();
    timer = setInterval(function() { firstAnimat() }, 3000);
}

function stop(){
    clearInterval(timer);
}

window.addEventListener("blur", function(e) {
    stop()
}),
window.addEventListener("focus", function(e) {
    start()
});

由于表现出来的是在我切换出去后，dom卡了几下，那我直接主动清除定时器不就好了。

问题暂时解决了，但是看起来还是很不优雅，相信随着我之后的学习，会一点一点完善起来的。

0%