1.高频触发的事件监听回调:比如 onscroll,onresize,oninput,touchmove等;
2.用户名,手机号,邮箱输入验证时的输入框搜索自动补全事件,搜索框搜索输入,只需用户最后一次输入完,再发送请求;
3.频繁操作点赞和取消点赞;
4.浏览器窗口大小改变后,只需窗口调整完成后,再执行resize事件中的代码,防止重复渲染;
如果在500ms 内频繁操作,则每次都会清除一次定时器然后重新创建一个。直到最后一次操作,然后等待500ms 后发送ajax。
1.防抖函数主要利用了闭包,高阶函数,定时器等特性。
2.首先我们可以定义一个高阶函数 debounce,接受一个回调函数和延迟时间,在函数内部定义一个定时器变量,用于记录当时的定时器
3.debounce 内部我们返回一个函数,函数执行的时候会检查当前是否有定时器,有的话会清除当前的定时器,重新赋值一个新的定时器给定时器变量,并设置定时器执行时间为用户传入的第二个参数
4.定时器内部通过apply 调用用户传入的函数,并传入执行上下文和arguments
5.这样就能保证在规定时间内,不会高频的触发回调函数
function ajax(content){
console.log('ajax request ' + content)
}
function debounce(fun,delay){
return function(args){
let that=this;
let _args=argsclearTimeout(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)
})