音乐网站建设方案,网站手机访问 动易,外贸营销型网页设计公司,wordpress 无法登陆后台实际开发过程中#xff0c;我们会经常遇到#xff0c;首次进入页面进行相应提示#xff0c;然后指定时间后自动消失或者前端时钟展示等需求。
按照传统方案#xff0c;我们可以使用 setTimeout 实现。但其存在#xff1a;实际延时比设定值更久的情况。
setTimeout 不准时…实际开发过程中我们会经常遇到首次进入页面进行相应提示然后指定时间后自动消失或者前端时钟展示等需求。
按照传统方案我们可以使用 setTimeout 实现。但其存在实际延时比设定值更久的情况。
setTimeout 不准时
有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久。
最小延时 4ms If nesting level is greater than 5, and timeout is less than 4, then set timeout to 4. – HTML5 spec Timers 在浏览器中由于函数嵌套到一定深度会导致被阻塞。
function cb() { setTimeout(cb, 0)
}
setTimeout(cb, 0)未被激活的 tabs 的定时最小延迟1000ms
为了优化 tab 的加载损耗以及降低耗电量在未被激活的 tab 中定时器的最小延时限制为 1S1000ms。
超时延迟
除了最小延时之外定时器仍然有可能因为当前页面或者操作系统/浏览器本身被其他任务占用导致延时。
需要被强调是直到调用 setTimeout()的主线程执行完其他任务之后回调函数和代码段才能被执行。
最大延时值
包括 IE、Chrome、Safari、Firefox 在内的浏览器其内部以 32 位带符号整数存储延时。这就会导致如果一个延时 (delay) 大于 2147483647 毫秒 (大约 24.8 天) 时就会溢出导致定时器将会被立即执行。-- setTimeout/setInterval delay数值过大问题
打破 4ms 的限制
如果想在浏览器中实现 0ms 延时的定时器可以尝试下述方法
(function() {var timeouts [];var messageName zero-timeout-message;function setZeroTimeout(fn) {timeouts.push(fn);window.postMessage(messageName, *);}function handleMessage(event) {if (event.source window event.data messageName) {event.stopPropagation();if (timeouts.length 0) {var fn timeouts.shift();fn();}}}window.addEventListener(message, handleMessage, true);window.setZeroTimeout setZeroTimeout;
})();CSS更准时
如果要实现特别准时的业务场景如时钟。显然 setTimeout/setInterval 不是最佳实践如何避免同步阻塞卡顿是突破该问题的重要一点。
这里使用 css 动画来实现css 动画有几个显著的优点
不依赖 javascript且有成熟的相关 api运行效果良好甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅让浏览器控制动画序列允许浏览器优化性能和效果如降低位于隐藏选项卡中的动画更新频率。
animation 属性是 animation-nameanimation-duration, animation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
属性说明示例animation-name指定应用的一系列动画animation1,animation2animation-duration指定一个动画周期的时长单位 s 或者 ms60sanimation-timing-function在每一动画周期中执行的节奏ease、linear、steps(60)animation-delay定义动画于何时开始单位 s 或者 ms100msanimation-iteration-count定义动画在结束前运行的次数infinite无限次、3animation-direction指示动画是否反向播放normal、alternate、reverseanimation-fill-mode设置 CSS 动画在执行之前和之后如何将样式应用于其目标forwards、backwardsanimation-play-state定义一个动画是否运行或者暂停running、paused
animation: timer 60s infinite steps(60) forwards;steps(number_of_steps, direction)定义了一个阶梯函数将输出值的域等距地划分。 通过 自定义数据属性 绑定要显示的值。这样在 css 中可以通过表达式 attr() 用来获取值。
div classcontainerp data-seconds00 01 02 03 04 05 06 07 08 09/p
/div通过伪元素显示当前值每次只显示1个然后动画周期的时长 10s 等距划分为10步。
每 1s 中移动向量的纵坐标。
.container p {height: 68px;width: 68px;line-height: 68px;overflow: hidden;
}
.container p::after {display: block;content: attr(data-seconds);animation: timer 10s infinite steps(10) forwards;
}keyframes timer {from {transform: translate3d(0, 0, 0);}to {transform: translate3d(0, -100%, 0);}
}
