Question

我正在尝试装饰jQuery document.ready function

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function() {
            console.log("ready2");
        });
    </script>
    <script type="text/javascript">
        $.fn.ready = (function(fn) {
            return function() {
                console.log("ready1");
                return fn.apply(this, arguments);
            }
        })($.fn.ready);
    </script>
</head>
<body>
    <img src="http://deelay.me/1000?http://my-site.com/image.gif" />
</body>
</html>

我期待看到的是 - 在浏览器控制台中是“ready1”和“ready2”，但是只有“ready2”。我缺少什么？

FiddleJS：http://jsfiddle.net/GXCnu/

更新＃1：实际上很明显为什么它不工作 - 因为我先调用ready（）....然后另一个问题 - 如何在$ .ready（）之前调用自定义函数？

Answer 1

首先调用ready()，然后再装饰它。颠倒顺序。

Answer 2

jQuery只绑定onreadystatechange或DOMContentLoaded事件^[1]。它会检查document.readyState === "complete"。

我的一个想法是绑定一个事件来检查this.readyState === 'interactive'。这应该在"complete"之前发生。

$(function () {
    console.log("ready2");
});

$(document).on('readystatechange', function(){
    if(this.readyState === 'interactive'){
        console.log('ready1');
    }
});

DEMO：http://jsfiddle.net/vP5vZ/

¹ http://james.padolsey.com/jquery/#v=1.6.2&fn=jQuery.bindReady

Answer 3

这是修复：

$.fn.ready = (function(fn) {
        return function() {
            console.log("ready1");
            return fn.apply(this, arguments);
        }
    })($.fn.ready)();

注意分号前面的末尾的（）。您必须调用返回的内部函数。

装饰jQuery document.ready函数

3 个答案: