谈谈项目中几个经典的jquery定时器问题 - Web前端

最近项目中做了一些循环的css3动画，我结合了JQuery定时器来实现，项目过程中碰到了一些小问题，比如变量传参等等。早上拿出来分享下，本次主要拿几个经典的问题来学习。

有些童鞋刚开始定时器的时候，总是习惯直接这样写的。代码如下：

SetInterval("fn()",2000);

最近碰到个问题，在使用jQuery写定时器时，总是会出现fn不存在的错误提示，如下：

$(function(){
    setInterval("fn()",2000);
})

解决方法是去掉引号和括号，采用最原始的方法；

$(function(){
    setinterval(fn,2000);
})

另外一种就是在书写jq的扩展，如下：

$(function(){ 
    $.extend({ 
        fn:function(){ 
            alert("im fn!"); 
        } 
    }); 
    setinterval("$.fn()",2000); 
});

以上写法都是没什么问题的。但是如果需要传递参数该如何？

我们拿上面的提到的代码进行修改，代码如下：

$(function(){
    setinterval(fn(para),2000);
})

看上去没问题？其实报错了。这个问题比较经典。 如何处理呢，这时你可以内置一个function，写成如下代码：

$(function(){
    setInterval(function(){fn(para)},2000);
})

OK，发现报错已经解除。

接下来我们对上面提到的JQ扩展写法实现传参，首先我们的定义变量...如下：

$(function(){ 
    $start = 1; 
    $.extend({ 
        a:function(t){ 
            $index = t; 
            alert($index); 
            $start++; 
        } 
    }); 
    setInterval("$.a("+$start+")",2000); 
});

运行起来，发现弹出结果一直是1，什么鬼(┬＿┬)，结果不会增加。这里需要注意的是setInterval里面的第一个参数，这是一个语句，用双引号括了起来，里面的东西会被解释成变量。如果按照上面的写法，相当于
setInterval("$.a(1)",2000); 那么结果也就无可厚非了。好吧，只能继续优化下代码：

$(function(){ 
    $start = 1; 
    $.extend({ 
        a:function(t){ 
            $index = t; 
            alert($index); 
            $start++; 
        } 
    }); 
    setInterval("$.a($start)",2000); 
});

这时$start才会被解释成变量。语句相当于function(){a(变量)}，而不是function(){a(值)}。

总结

上面提到的这些问题很普遍，都是一些细节方面的处理，希望大家学习后，避免犯这样的错误。

标签：几个定时器项目经典Webjquery