<!DOCTYPE html>
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<script type="text/javascript">
const jobQueue = new Set()
const p = Promise.resolve()
let isFlushing = false
function flushJob() {
if (isFlushing) return
isFlushing = true
p.then(() => {
jobQueue.forEach(job =>job())
}).finally(() => {
isFlushing = false
})
}
const data = { foo: 1 }
const obj = new Proxy(data, {})
effect(() => {
console.log(obj.foo)
}, {
scheduler(fn) {
jobQueue.add(fn)
flushJob()
}
})
obj.foo++
obj.foo++
</script>
</body>
</html>
还是不行
<!DOCTYPE html>
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<script type="text/javascript">
//定义一个任务队列
const jobQueue = new Set()
//创建一个promise实例,将一个任务添加到微任务队列
const p = Promise.resolve()
//是否正在刷新队列
let isFlushing = false
function flushJob(){
//如果队列正在刷新,什么也不做
if(isFlushing) return
//将状态设置为true
isFlushing = true
//在微任务队列中刷新jobQueue队列
p.then(() =>{
jobQueue.forEach(job => job())
}).finally(() =>{
//结束后将iFlushing重置
isFlushing = false
})
}
effect(() =>{
console.log(job.foo)
},{
scheduler(fn){
//将副作用函数添加到jobQueue队列
jobQueue.add(fn)
flushJob()
}
})
job.foo++
job.foo++
</script>
</body>
</html>
连这个很简单的也不行了,同样的bug
应该引用什么js?
<!DOCTYPE html>
<html>
<head>
<title>document.write() Example</title>
</head>
<body>
<script type="text/javascript">
const data = {foo : 1}
const obj = new Proxy(data,{
/*.....*/})
effect(() => {
console.log(obj.foo)
})
obj.foo++
</script>
</body>
</html>