節(jié)流模式:對(duì)重復(fù)的業(yè)務(wù)邏輯進(jìn)行節(jié)流控制陨闹,執(zhí)行最后一次操作并取消其他操作,以提高性能
代碼實(shí)現(xiàn):監(jiān)聽(tīng)滾動(dòng)事件薄坏,出現(xiàn)卡頓問(wèn)題趋厉,因?yàn)閟corll事件頻繁調(diào)用回調(diào)〗鹤梗可以通過(guò)節(jié)流模式君账,減少回調(diào)次數(shù)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>節(jié)流器模式</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var throttle = function () {
var isClear = arguments[0], fn
// 如果第一個(gè)參數(shù)是boolean烈性沈善,那么第一個(gè)參數(shù)則表示是否清除計(jì)時(shí)器
if (typeof isClear === 'boolean') {
fn = arguments[1]
fn._throttleID && clearTimeout(fn._throttleID)
} else {
fn = isClear
// 第二個(gè)參數(shù)為函數(shù)執(zhí)行參數(shù)
param = arguments[1]
arguments.callee(true, fn)
fn._throttleID = setTimeout(function () {
fn.apply(null, param)
}, 300)
}
}
function moveScroll () {
var top = $(document).scrollTop()
console.log(top)
}
$(window).on('scroll', function () {
throttle(moveScroll)
})
</script>
</head>
<body>
<div style="height: 2000px;"></div>
</body>
</html>