防抖&&节流
1、防抖
防抖策略(debounce) 是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。
2、应用场景
用户在输入框中连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源;
3、输入框防抖
利用定时器
var timer = null // 1.防抖动的timer
function debounceSearch(keywords) { // 2.定义防抖的函数
timer = setTimeout(function() {
//发起JSONP请求
getSuggestList(keywords)
}, 500)
}
$('#ipt').on('keyup', function() { // 3.在触发keyup 事件时,立即清空timer
clearTimeout(timer)
// ...省略其他代码
debounceSearch(keywords)
})
4、节流
节流策略(throttle)可以减少段时间内事件的触发频率。