最近项目中做了一些循环的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(值)}。
总结
上面提到的这些问题很普遍,都是一些细节方面的处理,希望大家学习后,避免犯这样的错误。
网友评论文明上网理性发言 已有0人参与
发表评论: