今天在看《Head First jQuery》的第五章。以下是源码
<!-- HTML代码 --> <img class="lightning" id="lightning1" src='images/lightning-01.jpg' /> <img class="lightning" id="lightning2" src='images/lightning-02.jpg' /> <img class="lightning" id="lightning3" src='images/lightning-03.jpg' /> <!-- CSS代码 --> .lightning{ display:none;position:absolute;left:0px;top:0px; } <!-- jQuery代码 --> $(function(){ lightning_one(); lightning_two(); lightning_three(); }); function lightning_one(){ $("#container #lightning1").fadeIn(250).fadeOut(250); setTimeout("lightning_one()",4000); }; function lightning_two(){ $("#container #lightning2").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_two()",5000); }; function lightning_three(){ $("#container #lightning3").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_three()",7000); };
但如果把自定义函数放到$(function(){...})里(如下),只会在加载页面后执行一次,然后就报错undefined,这是怎么回事呢??
<!-- jQuery代码 --> $(function(){ function lightning_one(){ $("#container #lightning1").fadeIn(250).fadeOut(250); setTimeout("lightning_one()",4000); }; function lightning_two(){ $("#container #lightning2").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_two()",5000); }; function lightning_three(){ $("#container #lightning3").fadeIn("fast").fadeOut("fast"); setTimeout("lightning_three()",7000); }; lightning_one(); lightning_two(); lightning_three(); });
少年。。你把<spanstyle="font-family:Consolas,'BitstreamVeraSansMono','CourierNew',Courier,monospace;font-size:14px;line-height:15.3999996185303px;background-color:#FFFFFF;">setTimeout("lightning_one()",4000);换成<spanstyle="font-family:Consolas,'BitstreamVeraSansMono','CourierNew',Courier,monospace;font-size:14px;line-height:15.3999996185303px;background-color:#FFFFFF;">setTimeout(lightning_one,4000);就可以了。给你解释一下。setTimeout的第一个参数是传的function对象。如果你直接传的function引用就能立即调用到,如果你传的string,他会尝试为你封装出function对象,但是这时他会到域外去寻找,所以显示undefinedlightning_one放到里面,作用域是局部的,放到外面是全局的,setTimeout('lightning_one()', 第一个参数引的是全局域里的函数,引用不到所以就报错了
另外
<preclass="brush:js;toolbar:true;auto-links:false;">$("#container#lightning3").fadeIn("fast").fadeOut("fast");这种写法有问题的,fadeOut()要在fadeIn()的回调中执行 <preclass="brush:js;toolbar:true;auto-links:false;">$("#lightning3").fadeIn('fast',function(){$this.fadeOut('fast');});版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。