防抖
应用场景 :
1 百度联想查询 : 百度搜nike 会等你输入完nike后 页面跳转 不是你输入完n就立刻给你查询结果
2 页面滚动特定距离 显示【返回顶部按钮】
3 页面resize 触发事件
代码
HTML
<input type="text" id="unDebounce">
JS
function ajax(content) {
console.info(this)
console.log('ajax request ' + content)
}
function debounce(fun,delay){
return function (args) {
let that = this
let _args = args
clearTimeout(fun.id)
fun.id = setTimeout(function () {
fun.call(that,_args)
},delay)
}
}
let inputb = document.getElementById('debounce')
let debounceAjax = debounce(ajax,500)
inputb.addEventListener('keyup',function (e) {
debounceAjax(e.target.value)
})
节流
应用场景
1 连续点击按钮 切 需求为 间隔请求 例如 页面的【刷新】按钮
2 上拉加载获取数据 的【上拉加载】
代码
扫描二维码关注公众号,回复:
10625654 查看本文章
HTML
<input type="text" id="throttle">
JS
function ajax(content) {
console.log('ajax request ' + content)
}
let throttle = function (fn, delay) {
let last, deferTimer
return function () {
let that = this
let _args = arguments
let now = +new Date()
if(last && now < (last + delay)){
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fn.apply(that,_args)
},delay)
}else{
last = now
fn.apply(that,_args)
}
}
}
let throttleAjax = throttle(ajax,1000)
let throttleBtn = document.getElementById('throttle')
throttleBtn.addEventListener('keyup',function (e) {
throttleAjax(e.target.value)
})