最快的异步回调

原创于 2017-08-18 15:40:48 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#异步 #javascript #callback

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在不同浏览器环境下实现高效异步更新的方法。针对Chrome、Safari、Firefox等现代浏览器，使用MutationObserver实现2-3毫秒级别的更新；对于IE浏览器，则采用创建script标签并监听其onreadystatechange事件来达到约1毫秒的更新效果；而在不支持以上特性的环境中退回到使用setTimeout。

var BrowserMutationObserver = window.MutationObserver || window.WebKitMutationObserver
if (BrowserMutationObserver) { //chrome18+, safari6+, firefox14+,ie11+,opera15
    avalon.nextTick = function(callback) { //2-3ms
        var input = DOC.createElement("input")
        var observer = new BrowserMutationObserver(function(mutations) {
            mutations.forEach(function() {
                callback()
            })
        })
        observer.observe(input, {
            attributes: true
        })
        input.setAttribute("value", Math.random())
    }
} else if (window.VBArray) { 
//IE下这个通常只要1ms,而且没有副作用，不会发现请求，
//setImmediate如果只执行一次，与setTimeout一样要140ms上下
    avalon.nextTick = function(callback) {
        var node = DOC.createElement("script")
        node.onreadystatechange = function() {
            callback() //在interactive阶段就触发
            node.onreadystatechange = null
            root.removeChild(node)
            node = null
        }
        root.appendChild(node)
    }
} else {
    avalon.nextTick = function(callback) {
        setTimeout(callback, 0)
    }
}