裝飾jQuery document.ready函數
[英]Decorate jQuery document.ready function
問題描述
我正在嘗試裝飾jQuery document.ready函數
<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（）之前調用自定義函數？
3 個解決方案
解決方案1
2 2014-03-13 15:24:30
您首先調用ready() ，然后再裝飾它。 顛倒順序。
解決方案2
1 已采納 2014-03-13 15:48:29
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');
}
});
演示： http : //jsfiddle.net/vP5vZ/
1 http://james.padolsey.com/jquery/#v=1.6.2&fn=jQuery.bindReady
解決方案3
-1 2014-03-13 15:29:01
解決方法是：
$.fn.ready = (function(fn) {
return function() {
console.log("ready1");
return fn.apply(this, arguments);
}
})($.fn.ready)();
注意分號前的末尾的（）。 您必須調用返回的內部函數。
單元測試jQuery document.ready函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.