新手求教一个 JS 问题，为啥这个函数不能运行

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3926 天前的主题，其中的信息可能已经有所发展或是发生改变。

先贴上 JSFiddle 地址 http://jsfiddle.net/3KLhw/1/

不知道为什么，在 JSFiddle 里面 positionMessage 函数没反应。我在本地用 Firefox 打开时文本能够动起来的。不过那个不重要，只是我用来参考的。
代码我顺便贴上来吧，因为我不知道 JSfiddle 上面的代码有没有被我搞错了。

html:
<div id = "div" style = "width: 100px;height:100px"></div>

JS:
window.onload = function(){
fadeAnimate();
}
function fade(e,t,d){
e.style.opacity = 1 - t/d;
t++;
var str = "fade('" + e + "'," + t + "," + d + ")";
if(t < d) {
anim = setTimeout(str,20);
}
}

function fadeAnimate() {
var div = document.getElementById("div");
div.style.opacity = 1;
div.onclick = function() {
fade(div,0,100);
}
}

我的目的是想做个动画效果，当鼠标单击 div 时透明度随时间变化。但是这个函数不能按照我想的去执行。打开 firebug 显示 e.style is undefined . 这个我就不懂了，改了好久都没效果，一直有错误。

究竟是哪个地方出现了致命错误？顺便问下，setTimeout() 函数的参数为什么是这样的？我只知道 setTimeout() 第一个参数是代码，第二个参数是数值。这个 str 我是参考前面的那个函数的。

div

style

function

15 条回复 • 1970-01-01 08:00:00 +08:00

binux

2014-02-15 00:09:39 +08:00

LZ的JS哪学的？

serenader

2014-02-15 00:12:08 +08:00

@binux 额，不小心又按错感谢了。。是自学的，现在还在努力啃 JavaScript 高级程序设计中。。

serenader

2014-02-15 00:20:23 +08:00

问题已经解决了。感谢有回复的和有过来看一下的V友。

sneezry

2014-02-15 00:22:52 +08:00

你的fade函数中，setTimeout是以字符串的形式调用的自身，但是这样的话你想想e是不是就丢失了，所以可以改成匿名函数的形式：

fadeAnimate();
}
function fade(e,t,d){
e.style.opacity = 1 - t/d;
t++;
if(t < d) {
anim = setTimeout(function(){
function fade(e,t,d);
},20);
}
}

sneezry

2014-02-15 00:25:12 +08:00

fadeAnimate函数中的fade(div,0,100);改成fade(this,0,100);更妥当一些感觉

serenader

2014-02-15 00:30:08 +08:00

@sneezry 感谢回复。你的回答解决了我对 setTimeout 的疑问。我刚刚试了一下匿名函数，结果可以运行。不过也还要修改其他代码，

fade(e,t,d){
var element = document.getElementById("e");
element.style.opacity = 1 - t/d;
...
}

这样整个程序才能如愿运行。

serenader

2014-02-15 00:35:30 +08:00

@sneezry 说错了，刚刚脑袋一片混乱。按照你说的用匿名函数的话，一切都可以了。不用再修改其他东西了。
感谢您半夜三更帮我看这烂代码啊！

exoticknight

2014-02-15 01:21:45 +08:00

foo: function( arg1, arg2,speed ) {
if (.....) { // 判断结束条件
return;
}
else {
setTimeout( function() {self.foo( arg1, arg2 )}, speed );
}
}
我写跟setTimeout有关的函数的时候基本都是这样的结构，个人经验权当参考……

RIcter

2014-02-15 08:38:38 +08:00

@binux 犀利的吐槽=_=

serenader

2014-02-15 09:47:25 +08:00 via Android

@exoticknight 感谢回复！确实是setTimeout函数的问题，写成匿名函数之后就可以了。

serenader

2014-02-15 09:52:19 +08:00 via Android

@RIcter 额，本人才疏学浅，JS也是刚学不久，肯定还有很多写得不好的。还望各位大神指出毛病。
一楼是想表达我写得很糟糕的意思吧？若是这样的话麻烦各位指出错误。

sneezry

2014-02-15 15:08:44 +08:00

@serenader 你写的挺好的啊，刚开始学还想要怎样

zzNucker

2014-02-15 18:26:51 +08:00

其实setTimeout可以传参数的。

serenader

2014-02-15 19:16:59 +08:00

@zzNucker 请问你指的是如何传递参数呢？

zzNucker

2014-02-15 20:20:31 +08:00

@serenader 我指的是里面可以在超时时间后面再加参数作为传递到函数里的参数。