扫码关注官方订阅号
如果使用for循环直接会卡死浏览器,如果使用setTimeout下面的程序会继续运行,所以有什么好的办法能够实现类似asleep的功能
光阴似箭催人老,日月如移越少年。
停一段时间=>setTimeout 等事件发生=>绑定事件
setTimeout的话是要把延迟的代码写在function里面的
当然如果异步/时序逻辑特别复杂可以用一些辅助方法/类库,比如说就是需要单纯的sleep时间的话可以
function Timer() { this.delay = 0; } Timer.prototype.sleep = function(delay) { this.delay += delay; return this; }; Timer.prototype.do = function(cb) { setTimeout(cb, this.delay); return this; }; console.log(new Date); var timer = new Timer(); timer .sleep(3000) .do(function() { console.log(new Date); }) .sleep(1000) .do(function() { console.log(new Date); })
使用状态监测。 准备两个可访问的变量值,一个用于保存状态,一个用于暂停时缓存下个步骤。 主执行线程对所有步骤采用回调隔离设计,每个步骤结束后对该变量进行监测,变量值为继续时直接调用下个步骤,变量值为暂停时,将下个步骤写入缓存并停止。 暂停按钮用于将状态变量设为暂停值,继续按钮将将状态变量设为继续值并执行缓存的步骤。
状态检测函数可以直接作为回调处理,也可以使用数组依次的方式,具体可参考各种可串联和暂停的动画库。
如果动画不复杂的话
使用css的animation代替js的那部分动画,由于animation提供了一个animation-play-state属性,js可以控制这个属性的paused和running来控制动画
http://www.w3school.com.cn/cssref/pr_animation-play-state.asp
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
停一段时间=>setTimeout
等事件发生=>绑定事件
setTimeout的话是要把延迟的代码写在function里面的
当然如果异步/时序逻辑特别复杂可以用一些辅助方法/类库,比如说就是需要单纯的sleep时间的话可以
使用状态监测。
准备两个可访问的变量值,一个用于保存状态,一个用于暂停时缓存下个步骤。
主执行线程对所有步骤采用回调隔离设计,每个步骤结束后对该变量进行监测,变量值为继续时直接调用下个步骤,变量值为暂停时,将下个步骤写入缓存并停止。
暂停按钮用于将状态变量设为暂停值,继续按钮将将状态变量设为继续值并执行缓存的步骤。
状态检测函数可以直接作为回调处理,也可以使用数组依次的方式,具体可参考各种可串联和暂停的动画库。
如果动画不复杂的话
使用css的animation代替js的那部分动画,由于animation提供了一个animation-play-state属性,js可以控制这个属性的paused和running来控制动画
http://www.w3school.com.cn/cssref/pr_animation-play-state.asp