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

settimeout 每 1 秒改变使页面内容+1 显示有问题

  •  
  •   wangjialin · 2017-01-18 14:42:49 +08:00 · 3123 次点击
    这是一个创建于 2900 天前的主题,其中的信息可能已经有所发展或是发生改变。
    问题是酱婶儿的 用 settimeout 实现一个定时器 嗯 console 出来没问题 可是页面上的内容不能及时更新 只显示了最后的结果 求教 是因为 js 执行阻塞了渲染吗 所以直到最后 js 有错停止执行才显示出来最后的数字?蟹蟹指教
    输出如下:
    http://7xsw2u.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-01-18%20%E4%B8%8B%E5%8D%882.25.35.png
    代码如下
    http://7xsw2u.com1.z0.glb.clouddn.com/%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202017-01-18%20%E4%B8%8B%E5%8D%882.26.09.png
    15 条回复    2017-01-20 17:58:37 +08:00
    easyzhao
        1
    easyzhao  
       2017-01-18 14:57:46 +08:00
    chuxiaonan
        2
    chuxiaonan  
       2017-01-18 14:58:01 +08:00
    我觉得这个问题, setInterval 可能会更好 :)
    jerray
        3
    jerray  
       2017-01-18 14:59:09 +08:00   ❤️ 1
    setTimeout(add, 3000)
    greatbody
        4
    greatbody  
       2017-01-18 15:03:18 +08:00
    你这个代码肯定有问题。

    效果图和代码肯定不匹配。没有看到你的 console.log
    greatbody
        5
    greatbody  
       2017-01-18 15:08:20 +08:00
    @jerray 对,这里有问题。应该去掉括号。括号表示立即执行。
    JoyNeop
        6
    JoyNeop  
       2017-01-18 15:21:27 +08:00
    函数 add 返回 undefined , setTimeout 要求第一个参数是 function 类型。如果 setTimeout 报错就更容易发现了。
    ferrum
        7
    ferrum  
       2017-01-18 15:29:40 +08:00
    类似这种需要定时执行的函数里没有异步操作的,就直接使用 setInterval ,简单多了。

    另外, V2EX 支持直接贴代码的,用`包裹起来就可以了,比上传到七牛再贴图还是方便点吧。
    Nutlee
        8
    Nutlee  
       2017-01-18 16:53:23 +08:00
    呃 你延迟定时器 传的是 undefined ,并不是函数引用... 猜测这样直接导致原本想延迟 3s 调用的 add() ,立即执行了。
    另外,多说一句这代码略啰嗦,你明明缓存了 dom ,为啥操作的时候再查一遍....
    binjoo
        9
    binjoo  
       2017-01-18 16:55:43 +08:00
    编辑器是什么字体?
    codelegant
        10
    codelegant  
       2017-01-18 20:13:01 +08:00 via Android
    使用命名的函数闭包实现递归。
    jun4rui
        11
    jun4rui  
       2017-01-18 20:46:24 +08:00 via Android
    你不如记录起始时间,然后每秒更新一次和起始时间的偏移量好了,用系统时钟肯定没什么偏差。
    wangjialin
        12
    wangjialin  
    OP
       2017-01-19 10:30:55 +08:00
    @easyzhao
    @jerray
    @JoyNeop 了解了 第一个参数是函数名或代码
    @ferrum 哦好哒 下次直接贴代码 `<p>hello world</p>`

    @Nutlee 后一句啥意思 没懂
    @binjoo atom 默认字体啊

    @jun4rui 也对
    dsphper
        13
    dsphper  
       2017-01-19 12:38:56 +08:00
    问题产生的原因是: func 调用栈嵌套太多导致的。你应该用 setInterval 来实现循环定时器功能的,但你选择了用 setTimeout 嵌套执行来实现循环定时器。
    解决:用 setInterval 。
    Nutlee
        14
    Nutlee  
       2017-01-19 13:17:11 +08:00
    @wangjialin 你首次进入的网页的时候通过 `document.getElementsByClassName('test')[0]` 取得了 `pTag`,然后在每次 `inc()` 执行的时候又查找了一次 dom 以取得 innerHTML ,可以继续用 pTag 直接取的....
    wangjialin
        15
    wangjialin  
    OP
       2017-01-20 17:58:37 +08:00
    @Nutlee 额 您说的都对 我当时以为内容赋值没成功 所以就重新了哈哈哈 结果问题并不是这儿的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1108 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:50 · PVG 02:50 · LAX 10:50 · JFK 13:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.