只是想问一下如何创建最简单的倒数计时器.
网站上会有一句话说:
"注册于05:00关闭!"
所以,我想要做的是创建一个简单的js倒计时器,从"05:00"到"00:00",然后一旦结束就重置为"05:00".
我以前经历过一些答案,但是对于我想做的事情,它们看起来都太强烈了(Date对象等).
一直困扰着我的是setTimeout()Javascript中的方法多么难以预测.
根据我的经验,计时器在很多情况下非常不准确.由于不准确,我的意思是实际延迟时间似乎或多或少变化250-500ms.虽然这不是一个大量的时间,但当使用它来隐藏/显示UI元素时,时间可以明显地显着.
是否有任何技巧可以确保setTimeout()准确执行(不使用外部API)或这是一个失败的原因?
这真是一个非常简单的问题.如果我使用setInterval(something, 1000),我可以完全确定31天之后它会触发"某些东西" 60*60*24*31吗?或者是否存在所谓漂移的风险?
我知道javascript中的setInterval方法至少有1毫秒.我可以加快速度吗?喜欢用微秒?
为了我需要的东西:
我做了一个画布css/js动画.它是一条简单的线条,可以治愈并恢复生产线.我有一个滑块来调整这个动画的速度.所以最低的滑块值会非常快,最高的滑块真的很慢.这是可以理解的吗?谢谢!
我希望为我的应用程序添加一个计时器,它使用react native.
我已经查看了文档中的计时器mixin的链接,但是我使用es6构建了应用程序的其余部分,因此这将不兼容.
我试过以下.
在我的Main类中,我有一个名为的函数 getTimerCountDown
getTimerCountDown() {
setTimeout(() => {
this.setTimeRemaining(this.getTimeRem()-1);
}, 1000);
}
getTimeRem() {
return this.state.timeRemaining;
}
Run Code Online (Sandbox Code Playgroud)
我试过调用它,componentDidUpdate如下所示.如果我不与UI进行任何其他交互,这就像我想要的那样.
如果我这样做(例如,我有一个按钮,我可以点击视图.)当`componentDidUpdate被再次调用时,conunter变得非常快(因为它被称为x次)
componentDidUpdate(){
this.getTimerCountDown();
}
Run Code Online (Sandbox Code Playgroud)
我不确定我是否完全走错了轨道,或者对我所做的一些小改动可以得到我想要的东西.使用es6让倒数计时器在本机中工作的最佳方法是什么?
主页上的计时器类
<Timer timeRem={this.getTimeRem()} />
Run Code Online (Sandbox Code Playgroud)
回报
render(){
return (
<View style={styles.container}>
<Text> This is the Timer : {this.props.setTimer} - {this.props.timeRem} </Text>
</View>
)
}
Run Code Online (Sandbox Code Playgroud) 我在这里看到了一个Javascript毫秒计时器演示
但是,我发现它非常不准确,因为它setInterval每次增加1毫秒.
有没有人有关于如何在JS中轻松实现精确的毫秒计时器的想法?是否必须使用Date对象完成?
给出以下jsFiddle,这是一个简单的递增计数器
....如果我使用移动设备(智能手机或平板电脑为了争论)访问上面的网址,计数器开始按照您的预期递增,只要有JavaScript支持,那么看来如果我按"主页" "按钮,或单击电源按钮一次关闭屏幕(但保持手机开机),然后脚本将停止运行,计数器停止递增.我期待这种情况发生,并且我理解为什么在移动设备上保留电池寿命非常重要的原因,因此UI线程睡眠或类似情况是有道理的.重新访问浏览器后,计数器将继续递增.在现实世界中,我假设,尽管处于不活动期,但使用JavaScript确定超时时间的网站不会超时.
我也假设,这将因设备而异,通过固件,通过软件什-什么,我想在这里确定是是否有一个标准的方法或默认行为内置到手机的发展框架,这和如何在任何形式的一致性设备的行为.
我不完全确定我在这里问过一个好问题,但我很难从SO中找到100%的相关信息,或者我不太清楚在搜索时我需要问什么问题.
谢谢
为了好玩,我用 JavaScript 构建了一个简单的鼓机模拟。(您可以在http://mink.click上尝试一下。)
我想知道是否可以采取任何措施来提高 setInterval(...) 的准确性。在完美的世界中,样本每 250 毫秒触发一次(直到我将其定制)。但是(a)运行代码会阻止它成为一个完美的世界,因为执行每条指令都需要时间,并且(b)有时,当我刚开始玩时,计时器(在 Chrome 中)的触发似乎需要更长的时间。
我知道在 Windows 中,您可以设置比使用消息队列的典型 WM_TIMER 消息更准确的多媒体计时器。所以,我想知道是否有任何方法可以在 JavaScript 中获得更准确的计时器。
我知道 JavaScript 不是构建鼓机模拟器的最佳位置,但我这样做只是为了好玩:-)
javascript ×8
timer ×4
ios ×2
setinterval ×2
android ×1
countdown ×1
dom-events ×1
facebook ×1
html ×1
jquery ×1
mobile ×1
react-native ×1
reactjs ×1