在页面空闲的时候,执行一些计算或某些特殊【本文受版权保护】原创内容,盗版必究。的后台任务,这样可以避免对用户操作带来卡【关注微信公众号:wwwtangshuangnet】本文版权归作者所有,未经授权不得转载。顿的问题。虽然js支持异步编程,但是即使【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】某些任务是异步执行的,但是因为js是单线【转载请注明来源】【转载请注明来源】程程序,所以,如果一个任务需要花费比较长【转载请注明来源】未经授权,禁止复制转载。的时间去进行计算,那么即使它是在异步回调【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。的时候执行,也会带来界面卡顿,而如果用户【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.net在这个卡顿期间进行交互操作,就会明显感到【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】卡死状态,体验不好。
未经授权,禁止复制转载。【本文受版权保护】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。有没有一种办法避免这种情况发生?当然有,【本文首发于唐霜的博客】【本文首发于唐霜的博客】最好的方式是使用webworker,启用原创内容,盗版必究。未经授权,禁止复制转载。另外一个线程去执行这个需要消耗大量时间的【转载请注明来源】未经授权,禁止复制转载。运算。因为webworker和用户界面所转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。在的线程相互不影响,所以,不会给用户带来未经授权,禁止复制转载。【原创不易,请尊重版权】卡顿感。当计算完毕之后,通过postMe【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。ssage实现数据传递,对于用户而言,几本文版权归作者所有,未经授权不得转载。本文版权归作者所有,未经授权不得转载。乎无感。
【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】但是在一些特殊情况下,我们需要在用户界面原创内容,盗版必究。【原创不易,请尊重版权】所在的主线程去执行这种程序。比如,我们要【作者:唐霜】【原创内容,转载请注明出处】在这个任务中获取DOM的一些信息。这个时【原创内容,转载请注明出处】原创内容,盗版必究。候,我们要想办法让这个任务不对用户的操作【未经授权禁止转载】未经授权,禁止复制转载。造成影响。
【本文受版权保护】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netweb标准提供了requestIdleC著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】allback这个接口,它的用法有点像r【原创不易,请尊重版权】【转载请注明来源】equestAnimationFrame【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】,它主要用于在浏览器闲时执行某个任务。比原创内容,盗版必究。【本文首发于唐霜的博客】如:
本文版权归作者所有,未经授权不得转载。本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】著作权归作者所有,禁止商业用途转载。【作者:唐霜】var a = 0
requestIdleCallback(() => {
a ++
})
上面这段代码,给浏览器下了一个命令,当浏转载请注明出处:www.tangshuang.net原创内容,盗版必究。览器空闲的时候,执行a ++。
本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】【转载请注明来源】原创内容,盗版必究。【版权所有】唐霜 www.tangshuang.net不过requestIdleCallbac【版权所有,侵权必究】原创内容,盗版必究。k会有一些兼容性问题,我们只能通过一些手著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net段来使它在低版本浏览器可以用:
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有,侵权必究】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】export const requestIdleCallback = window.requestIdleCallback || function(cb, delay = 1000) {
const start = Date.now()
const action = () => cb({
didTimeout: false,
timeRemaining: function() {
return Math.max(0, 50 - (Date.now() - start))
},
})
const id = setTimeout(() => {
timeout.id = setTimeout(action, delay)
timeout.reset = () => {
clearTimeout(timeout.id)
timeout.id = setTimeout(action, delay)
}
document.addEventListener('keydown', timeout.reset, true)
document.addEventListener('mousedown', timeout.reset, true)
document.addEventListener('touchstart', timeout.reset, true)
document.addEventListener('touchmove', timeout.reset, true)
document.addEventListener('mousemove', timeout.reset, true)
window.addEventListener('scroll', timeout.reset, true)
window.addEventListener('resize', timeout.reset, true)
})
var timeout = { id, reset: null }
return timeout
}
export const cancelIdelCallback = window.cancelIdelCallback || function(timeout) {
if (!timeout) {
return
}
clearTimeout(timeout.id)
document.removeEventListener('keydown', timeout.reset)
document.removeEventListener('mousedown', timeout.reset)
document.removeEventListener('touchstart', timeout.reset)
document.removeEventListener('touchmove', timeout.reset)
document.removeEventListener('mousemove', timeout.reset)
window.removeEventListener('scroll', timeout.reset)
window.removeEventListener('resize', timeout.reset)
timeout.reset = null
timeout.id = null
}
cancelIdelCallback用于未经授权,禁止复制转载。【转载请注明来源】取消前面下达的命令,参数是request转载请注明出处:www.tangshuang.net转载请注明出处:www.tangshuang.netIdleCallback的返回值。
【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshuangnet】不过有一个问题,就是requestIdl未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】eCallback是只执行一次的,如果我本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】们想要做一个守护程序,在浏览器空闲的时候未经授权,禁止复制转载。【关注微信公众号:wwwtangshuangnet】,就开始运行这个守护程序,应该怎么做呢?
转载请注明出处:www.tangshuang.net原创内容,盗版必究。【本文受版权保护】【版权所有,侵权必究】/**
* 创建一个在空闲时执行的任务
* @param {*} fn
*/
export function autoidle(fn, interval = 1000, immediate = true) {
var idle
const run = () => {
const action = () => {
idle = requestIdleCallback(run, interval)
}
asyncx(fn)().then(action).catch(action)
}
const start = () => {
cancelIdelCallback(idle)
idle = requestIdleCallback(run, interval)
}
const stop = () => {
cancelIdelCallback(idle)
}
if (immediate) {
start()
}
return { start, stop }
}
这个函数可以创建一个守护程序,它可以在你【原创不易,请尊重版权】【本文首发于唐霜的博客】的浏览器空闲的时候不断运行,但你的浏览器【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net开始忙碌的时候,又不会运行的效果。另外,【原创内容,转载请注明出处】本文作者:唐霜,转载请注明出处。它返回两个函数,start 和 stop本文版权归作者所有,未经授权不得转载。【本文受版权保护】,用以在必要的时候停止和重启任务。
著作权归作者所有,禁止商业用途转载。【未经授权禁止转载】本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。

技术人员的文章看不懂。