javascript - js清除定时器问题？

Question

demo：http://xuhaibing.com/8/%E6%9C...
$(window).resize的时候 里面圆形运动多次执行了

  
            function listResize() {
        //圆形运动
        if ($('p').hasClass('m-service-support')) {

            //获取当前半径，这个半径是动态的
            var ringRadius = $('.m-service-support .bd .items .text .img').height() / 2 - 1;
            var a = ringRadius,
                b = ringRadius,
                r = ringRadius,
                times = 0;

            var t = setInterval(function flutter() {
                times += 0.05;
                var hudu = (2 * Math.PI / 360) * 6 * times;
                var X = a + Math.sin(hudu) * r;
                var Y = b - Math.cos(hudu) * r

                $('.m-service-support .fix').css({
                    left: X - 8 + "px",
                    top: Y - 8 + "px",
                })

                if (times == 60) {
                    return;
                }
            }, 2);
        }

    }
    listResize();

    $(window).resize(function() {

        listResize();

    });

Answer 1

问题描述不清楚~

clearInterval(t);

t定义为全局的.
如果每次都想定义一个新的定时器:

clearInterval(t);
t = setInterval(function()...)

如果直接用旧的:

t = t || setInterval(function()...);

Answer 2

resize 的时候多次调用了 listResize, 肯定会这样.
你需要在调用 listResize 的时候先清除之前的定时器.在调用.

其实看你这个, resize 时候调用是为了动态计算小球运动半径吧.
可以直接在 resize 的时候计算出来. 不需要重复调用 listResize.

Answer 3

定时器
比如说 time
定义成全局变量
每次运行之前 先清除定时器 以防止不必要的麻烦 比如 防止运动过程中的抖动或者加速问题

Answer 4

我感觉计算位置的逻辑修改改一下，计算位置相对每一个块的左上角计算，就不需要再resize()中重新计算位置了,
再者，定时器建议使用requestAnimationFrame，没有抖动的问题了就，http://www.cnblogs.com/tianma...