防抖:每触发一次,等一定时间间隔,如果在这时间间隔里,又被触发重新计时,减轻服务器压力,应用场景如搜索框匹配,屏幕滚动,用户注册时候的手机号码验证和邮箱验证了,只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语等
function debounce(fn,delay){
var timer=null
return function(){
var that = this
clearTimeout(timer) //清空计时器
timer = setTimeout(function(){
fn.call(that,3)
},delay)
}
}
事例:
window.onscroll = debounce(function(value){
console.log(value)
},1000)
节流,在一定时间间隔内,多次触发,只执行一次,应用场景,如表单提交重复多次点击
function throttle(fn,delay){
var flag = true //标志位
return function(){
if(!flag) return
flag =false
var that = this
setTimeout(function(){
fn.call(that,3)
flag = true
},delay)
}
}
事例:
var h = document.getElementById('clc')
h.onclick=throttle(function(value){
console.log(value)
},1000)