jQuery實現的瀑布流加載效果示例
729
2024-02-18
jQuery 前階段推出了3.0版本，改動非常大，如果要使用 3.0 的話，建議先仔細了解一下新特性，否則會引起一些小問題，例如下面的代碼。
大家對jQuery 3.0十大新特性不了解的朋友可以參考下本篇文章。
<html>
<head>
<meta charset="utf-8">
<script src="http://www.gimoo.net/t/1901/jquery-3.0.min.js"></script>
<script>
$(function (){
$('#container').html('你好');
})
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
非常簡單，此時沒有任何問題，可以正常顯示內容，但如果 $(function (){... }) 內部出現異常，讓人困擾的問題便來了
添加一個異常后的狀態
$(function (){
throw new Error('出錯了');
$('#container').html('你好');
});
頁面不顯示內容是正常的，但控制臺也沒有顯示任何錯誤信息，顯然和我們的預期不一樣
因為在使用 jquery 2 時，這種情況下，控制臺是可以提示錯誤的
<script src="http://www.gimoo.net/t/1901/jquery-2.1.3.min.js"></script>
<script>
$(function (){
throw new Error('出錯了');
$('#container').html('你好');
});
</script>
解決辦法
因為 jquery 3.0 正式支持了 promise，所以可以對 .ready() 使用 promise 形式，使用 fail 拋出異常
例如
$.ready.then (function() {
throw new Error('出錯了');
$('#container').html('你好');
}).fail (function(error) {
throw error;
});
這時控制臺就可以顯示出錯誤信息了
