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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

问题是酱婶儿的用 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

setTimeout

酱婶儿

定时器

页面

15 条回复 • 2017-01-20 17:58:37 +08:00

easyzhao

2017-01-18 14:57:46 +08:00

可以参考这个 http://www.w3school.com.cn/tiy/t.asp?f=jseg_timing_infinite

chuxiaonan

2017-01-18 14:58:01 +08:00

我觉得这个问题， setInterval 可能会更好 :)

jerray

2017-01-18 14:59:09 +08:00

setTimeout(add, 3000)

greatbody

2017-01-18 15:03:18 +08:00

你这个代码肯定有问题。

效果图和代码肯定不匹配。没有看到你的 console.log

greatbody

2017-01-18 15:08:20 +08:00

@jerray 对，这里有问题。应该去掉括号。括号表示立即执行。

JoyNeop

2017-01-18 15:21:27 +08:00

函数 add 返回 undefined ， setTimeout 要求第一个参数是 function 类型。如果 setTimeout 报错就更容易发现了。

ferrum

2017-01-18 15:29:40 +08:00

类似这种需要定时执行的函数里没有异步操作的，就直接使用 setInterval ，简单多了。

另外， V2EX 支持直接贴代码的，用`包裹起来就可以了，比上传到七牛再贴图还是方便点吧。

Nutlee

2017-01-18 16:53:23 +08:00

呃你延迟定时器传的是 undefined ，并不是函数引用... 猜测这样直接导致原本想延迟 3s 调用的 add() ，立即执行了。
另外，多说一句这代码略啰嗦，你明明缓存了 dom ，为啥操作的时候再查一遍....

binjoo

2017-01-18 16:55:43 +08:00

编辑器是什么字体？

codelegant

2017-01-18 20:13:01 +08:00 via Android

使用命名的函数闭包实现递归。

jun4rui

2017-01-18 20:46:24 +08:00 via Android

你不如记录起始时间，然后每秒更新一次和起始时间的偏移量好了，用系统时钟肯定没什么偏差。

wangjialin

2017-01-19 10:30:55 +08:00

@easyzhao
@jerray
@JoyNeop 了解了第一个参数是函数名或代码
@ferrum 哦好哒下次直接贴代码 `<p>hello world</p>`

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

@jun4rui 也对

dsphper

2017-01-19 12:38:56 +08:00

问题产生的原因是： func 调用栈嵌套太多导致的。你应该用 setInterval 来实现循环定时器功能的，但你选择了用 setTimeout 嵌套执行来实现循环定时器。
解决：用 setInterval 。

Nutlee

2017-01-19 13:17:11 +08:00

@wangjialin 你首次进入的网页的时候通过 `document.getElementsByClassName('test')[0]` 取得了 `pTag`，然后在每次 `inc()` 执行的时候又查找了一次 dom 以取得 innerHTML ，可以继续用 pTag 直接取的....

wangjialin

2017-01-20 17:58:37 +08:00

@Nutlee 额您说的都对我当时以为内容赋值没成功所以就重新了哈哈哈结果问题并不是这儿的