看個(gè)實(shí)例先
- 實(shí)現(xiàn)一個(gè)邏輯：當(dāng)在input中輸入內(nèi)容的時(shí)候识樱，將輸入的內(nèi)容顯示到一個(gè)DIV里面
- html 文件
<input type="text" value=""/>
<div class="inputText"></div>
var count = 0
$("input").on("input",function(e){
count && clearTimeout(count)
count = setTimeout(function(){
$(".inputText").html( $(e.target).val())
}, 1000)
})
術(shù)語解釋
- 看完上面代碼我注，你肯定在平時(shí)工作中有用到過咯（沒有？怎么可能Ｖ窆邸）
函數(shù)節(jié)流
- 定義：某個(gè)函數(shù)在一定時(shí)間間隔內(nèi)只執(zhí)行一次豫喧，也可以理解為把某個(gè)時(shí)間間隔內(nèi)執(zhí)行的函數(shù)合并為一個(gè)函數(shù)執(zhí)行
定義一個(gè)節(jié)流函數(shù)
- 定義一個(gè)函數(shù)名為throttle的函數(shù)
var count = null
function throttle (callback, delay) {
count && clearTimeout(count)
count = setTimeout(callback, delay)
}
$("input").on("input",function(e){
throttle(function(){
$(".inputText").html( $(e.target).val())
}, 1000)
})
- 上述函數(shù)有個(gè)問題，多了一個(gè)全局變量count缀雳，使用閉包改進(jìn)一下函數(shù)
function throttle (callback, delay) {
var count = null
return (function() {
count && clearTimeout(count)
count = setTimeout(callback, delay)
})()
}
- 按理說這個(gè)函數(shù)已經(jīng)很完美了，但是只是理論上的完美梢睛，在實(shí)際操作中會(huì)出現(xiàn)一種情況肥印，如上例：輸入框一直在輸入文字，文字就一直不會(huì)顯示出來绝葡。我們需要做一個(gè)處理：使得文字在超過某個(gè)時(shí)間間隔后要輸出一次深碱。
function throttle (callback, delay, wait) {
var count = null
var start = null
return function() {
var now = +new Date()
var context = this
var args = arguments
if ( !start ) {
start = now
}
if ( now - start > wait ) {
count && clearTimeout(count)
start = now
callback.apply(this, args)
} else {
count && clearTimeout(count)
count = setTimeout(function(){
callback.apply(this, args)
}, delay)
}
}
}
var f = throttle(function(e){
$(".inputText").html($(e.target).val())
}, 1000, 2000)
$("input").on("input",function(e){
f(e)
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
