V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
serenader
V2EX  ›  JavaScript

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

  •  
  •   serenader · 2014-02-15 00:05:16 +08:00 · 3632 次点击
    这是一个创建于 3969 天前的主题,其中的信息可能已经有所发展或是发生改变。
    先贴上 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 我是参考前面的那个函数的。
    15 条回复    1970-01-01 08:00:00 +08:00
    binux
        1
    binux  
       2014-02-15 00:09:39 +08:00   ❤️ 1
    LZ的JS哪学的?
    serenader
        2
    serenader  
    OP
       2014-02-15 00:12:08 +08:00   ❤️ 1
    @binux 额,不小心又按错 感谢 了。。是自学的,现在还在努力啃 JavaScript 高级程序设计 中。。
    serenader
        3
    serenader  
    OP
       2014-02-15 00:20:23 +08:00
    问题已经解决了。感谢有回复的和有过来看一下的V友。
    sneezry
        4
    sneezry  
       2014-02-15 00:22:52 +08:00   ❤️ 1
    你的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
        5
    sneezry  
       2014-02-15 00:25:12 +08:00
    fadeAnimate函数中的fade(div,0,100);改成fade(this,0,100);更妥当一些感觉
    serenader
        6
    serenader  
    OP
       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
        7
    serenader  
    OP
       2014-02-15 00:35:30 +08:00
    @sneezry 说错了,刚刚脑袋一片混乱。按照你说的用匿名函数的话,一切都可以了。不用再修改其他东西了。
    感谢您半夜三更帮我看这烂代码啊!
    exoticknight
        8
    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
        9
    RIcter  
       2014-02-15 08:38:38 +08:00
    @binux 犀利的吐槽=_=
    serenader
        10
    serenader  
    OP
       2014-02-15 09:47:25 +08:00 via Android
    @exoticknight 感谢回复!确实是setTimeout函数的问题,写成匿名函数之后就可以了。
    serenader
        11
    serenader  
    OP
       2014-02-15 09:52:19 +08:00 via Android
    @RIcter 额,本人才疏学浅,JS也是刚学不久,肯定还有很多写得不好的。还望各位大神指出毛病。
    一楼是想表达我写得很糟糕的意思吧?若是这样的话麻烦各位指出错误。
    sneezry
        12
    sneezry  
       2014-02-15 15:08:44 +08:00   ❤️ 1
    @serenader 你写的挺好的啊,刚开始学还想要怎样
    zzNucker
        13
    zzNucker  
       2014-02-15 18:26:51 +08:00
    其实setTimeout可以传参数的。
    serenader
        14
    serenader  
    OP
       2014-02-15 19:16:59 +08:00
    @zzNucker 请问你指的是如何传递参数呢?
    zzNucker
        15
    zzNucker  
       2014-02-15 20:20:31 +08:00
    @serenader 我指的是里面可以在超时时间后面再加参数作为传递到函数里的参数。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2662 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:03 · PVG 20:03 · LAX 04:03 · JFK 07:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.