检查 JS 中的异步函数重新进入

Question

场景：

我们有一个MutationObserver 处理函数handler。

在handler 中，我们做了一些DOM 操作，会再次触发handler。从概念上讲，我们将有一个可重入的handler 调用。除了MutationObserver 不在线程内运行，它会在handler 已经完成执行后触发。

因此，handler 将自行触发，但通过异步队列而非线程内触发。 JS 调试器似乎知道这一点，它将自己作为调用堆栈中的异步祖先（即使用 Chrome）。

为了实现一些有效的事件去抖动，我们需要检测相同的；也就是说，如果 handler 是由于自身触发的更改而被调用的。

那怎么办？

mutationObserver=new MutationObserver(handler);
mutationObserver.observe(window.document,{
    attributes:true,
    characterData:true,
    childList:true,
    subtree:true
});

var isHandling;
function handler(){
    console.log('handler');

    //  The test below won't work, as the re-entrant call 
    //  is placed out-of-sync, after isHandling has been reset
    if(isHandling){
        console.log('Re-entry!');
        //  Throttle/debounce and completely different handling logic
        return;
    }
    
    isHandling=true;
    
    //  Trigger a MutationObserver change
    setTimeout(function(){
        // The below condition should not be here, I added it just to not clog the 
        // console by avoiding first-level recursion: if we always set class=bar,
        // handler will trigger itself right here indefinitely. But this can be
        // avoided by disabling the MutationObserver while handling.
        if(document.getElementById('foo').getAttribute('class')!='bar'){
            document.getElementById('foo').setAttribute('class','bar');
        }
    },0);
    
    isHandling=false;
}


// NOTE: THE CODE BELOW IS IN THE OBSERVED CONTENT, I CANNOT CHANGE THE CODE BELOW DIRECTLY, THAT'S WHY I USE THE OBSERVER IN THE FIRST PLACE

//  Trigger a MutationObserver change
setTimeout(function(){
  document.getElementById('asd').setAttribute('class','something');
},0);

document.getElementById('foo').addEventListener('webkitTransitionEnd',animend);
document.getElementById('foo').addEventListener('mozTransitionEnd',animend);


function animend(){
    console.log('animend');
    this.setAttribute('class','bar-final');
}

#foo {
    width:0px;
    background:red;
    transition: all 1s;
    height:20px;
}
#foo.bar {
    width:100px;
    transition: width 1s;
}
#foo.bar-final {
    width:200px;
    background:green;
    transition:none;
}

<div id="foo" ontransitionend="animend"></div>
<div id="asd"></div>

注意 我们的用例在这里包含两个组件；我们称之为contents，它是任何普通的Web 应用程序，具有许多UI 组件和界面。还有一个叠加层，它是观察内容变化的组件，并可能自己做变化。

一个简单的想法是不够的，只是在处理时禁用MutationObserver；或者，假设对handler 的每一秒调用都是递归的；这在上面说明的animationend 事件的情况下不起作用：contents 可以有处理程序，而这些处理程序又可以触发异步操作。两个最受欢迎的此类问题是：onanimationend/oneventend、onscroll。

所以仅仅检测直接（第一次调用）递归的想法是不够的，我们需要在调试器中完全等同于调用堆栈视图：一种判断是否调用的方法（无论以后有多少异步调用) 是它自己的后代。

因此，这个问题不仅限于MutationObserver，因为它必然涉及一种通用方法来检测调用树中自身的异步调用后代。你可以用任何异步事件替换MutationObserver，真的。

上面例子的解释：在例子中，当#foo不是.bar时，mutationobserver在#foo上触发bar动画。但是，contents 有一个 transitionend 处理程序，它将 #foo 设置为 .bar-final，这会触发一个恶性的自递归链。我们想放弃对#foo.bar-final 更改的反应，方法是检测到这是我们自己操作的结果（以#foo.bar 开始动画）。

Answer 1

一种可能的解决方法是在触发一个突变时停止突变观察者

mutationObserver=new MutationObserver(handler);
mutationObserver.observe(window.document,{
    attributes:true,
    characterData:true,
    childList:true,
    subtree:true
});

//  Trigger a MutationObserver change
document.getElementById('foo').setAttribute('class','bar');
document.getElementById('foo').setAttribute('class','');

function handler(){
    console.log('Modification happend')

        mutationObserver.disconnect();
    //  Trigger a MutationObserver change
    document.getElementById('foo').setAttribute('class','bar');
    document.getElementById('foo').setAttribute('class','');

    mutationObserver.observe(window.document,{
    attributes:true,
    characterData:true,
    childList:true,
    subtree:true
});
}

查看 JS 小提琴

https://jsfiddle.net/tarunlalwani/8kf6t2oh/2/

Answer 2

我过去这样做的方法是创建信号量来标记异步函数何时已被调用并等待事件循环上的执行。

这里是 requestAnimationFrame 的一个简单示例

import raf from 'raf'
import State from './state'

let rafID

function delayedNotify () {
  rafID = null
  State.notify()
}

export default function rafUpdateBatcher () {
  if (rafID) return // prevent multiple request animation frame callbacks
  rafID = raf(delayedNotify)
}

在这种情况下，一旦您调用该函数，所有未来的调用都将被忽略，直到第一个调用被执行。将其视为异步节流函数

对于更复杂的场景，另一个解决方案可能是这个项目 https://github.com/zeit/async-sema

Answer 3

根据我从阅读您的 cmets 中收集到的信息，如果操作 A 异步触发了操作 B，您希望能够知道操作 A 在哪里完成（通常，不仅仅是在突变观察者中）。我不认为 JavaScript 中内置了任何技巧来做到这一点，就像你正在寻找的那样，但是，如果你确切地知道你的 JavaScript 是如何工作的，你就可以跟踪这些信息。 JavaScript 中的作业队列根据定义是 FIFO，事件循环队列也以这种方式工作。这意味着您可以在执行触发事件的操作的同时将与特定事件相对应的信息存储在数组中，并确信它们的处理顺序与数组相同。这是您的突变观察者的示例。

const
    foo = document.getElementById('foo'),
    mutationQueue = [];

function handler(){
    console.log('handler');
    
    const isHandling = mutationQueue.shift();
    if(isHandling){
        console.log('Re-entry!');
        //  Throttle/debounce and completely different handling logic
        return;
    }
    
    setTimeout(()=> {
        foo.setAttribute('class','bar');
        foo.setAttribute('class','');
        mutationQueue.push(true);
    }, 1000 * Math.random());
}

mutationObserver=new MutationObserver(handler);
mutationObserver.observe(foo, {
    attributes:true,
    characterData:true,
    childList:true,
    subtree:true
});

function randomIntervals() {
    setTimeout(()=>{
        foo.setAttribute('class','bar');
        foo.setAttribute('class','');
        mutationQueue.push(false);
        randomIntervals();
    }, 1000 * Math.random())
}

randomIntervals();

<div id='foo'></div>

您必须确保在代码中将触发您的异步处理程序的每个点添加适当的值，否则整个事情都会搞砸。我自己从来没有这样做过，我只是为这个问题想到了它，但似乎很容易做错。但是，我担心这可能是做你想做的事情的唯一方法。