在就绪函数的内部和外部声明变量

时间:2014-01-14 08:32:11

标签: jquery performance

我正在使用类似这样的jQuery:

$(document).ready(function(){
    var timer;
    $(selector).on('click',function(){
        //some functions
    });
    ....
    $(element).on('click',function(){
        // some functions
        clearInterval(timer);
        timer = setInterval(function(){
            //some functions here
        });
    });
});

$(element)点击功能意外触发多次,浏览器挂起问题。但后来我通过将变量计时器的声明移到就绪函数之外来解决了这个问题:

var timer;
$(document).ready(function(){
....
}

问题:变量如何在就绪和外部就绪功能内工作?


以下是我使用的完整jquery代码:http://jsfiddle.net/CG9Yn/

3 个答案:

答案 0 :(得分:0)

在FIDDLE之前的ANSER 如果在函数内部定义var timer,则每次都有一个新的计时器。例如

var timer; // assuming you declared it here
clearInterval(timer);
 timer = setInterval(function(){
            //some functions here
 });

在上面的代码中,每次点击旧计时器都不会被清除,每次创建一个新的计时器,clearInterval(timer);都没有任何效果。通过在函数外部定义timer来解决这个问题,现在每次点击都会先清除先前的计时器,然后再创建一个新的计时器。

这会回答你的问题吗?

<强>更新

在你的小提琴“$(document).on('click','.play',function(){”中,你没有打电话给“clearInterval”。那很好吗?我想你应该补充一点。你也可以粘贴html,以便小提琴运行

答案 1 :(得分:0)

变量的实际效果相同。唯一的区别是访问(本地或全球)。表现是一样的。

答案 2 :(得分:0)

无论您在何处放置声明,请查看以下代码:

$(document).on('click','.play',function(){
    $(this).removeClass('play').addClass('pause');
    timer = setInterval(function(){
        $('.gallery-wrapper .next').click();
    }, 5000);

});

正如您所看到的,setInterval()是无条件执行的,这意味着如果存在现有计时器,它现在将被覆盖,因此只能停止最后一个计时器。

在执行另一个clearInterval(timer)之前添加setInterval()应该有所帮助,不过您可能应该使用setTimeout()代替,以便最多一次触发您的代码。