看个实例先
- 实现一个逻辑：当在input中输入内容的时候，将输入的内容显示到一个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)
})
术语解释
- 看完上面代码，你肯定在平时工作中有用到过咯（没有？怎么可能！）
函数节流
- 定义：某个函数在一定时间间隔内只执行一次，也可以理解为把某个时间间隔内执行的函数合并为一个函数执行
定义一个节流函数
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)
})
- 上述函数有个问题，多了一个全局变量count，使用闭包改进一下函数
function throttle (callback, delay) {
var count = null
return (function() {
count && clearTimeout(count)
count = setTimeout(callback, delay)
})()
}
- 按理说这个函数已经很完美了，但是只是理论上的完美，在实际操作中会出现一种情况，如上例：输入框一直在输入文字，文字就一直不会显示出来。我们需要做一个处理：使得文字在超过某个时间间隔后要输出一次。
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)
})
