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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3578 days ago, the information mentioned may be changed or developed.

问题是酱婶儿的用 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 replies • 2017-01-20 17:58:37 +08:00

easyzhao

Jan 18, 2017

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

chuxiaonan

Jan 18, 2017

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

jerray

Jan 18, 2017

setTimeout(add, 3000)

greatbody

Jan 18, 2017

你这个代码肯定有问题。

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

greatbody

Jan 18, 2017

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

JoyNeop

Jan 18, 2017

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

bayallen

Jan 18, 2017

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

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

Nutlee

Jan 18, 2017

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

binjoo

Jan 18, 2017

编辑器是什么字体？

codelegant

Jan 18, 2017 via Android

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

jun4rui

Jan 18, 2017 via Android

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

wangjialin

Jan 19, 2017

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

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

@jun4rui 也对

dsphper

Jan 19, 2017

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

Nutlee

Jan 19, 2017

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

wangjialin

Jan 20, 2017

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