1.防抖函数(debounce)
1.1 什么是防抖
- 在事件被触发n秒后再执行回调函数,如果在这n秒内又被触发,则重新计时。
1.2 应用场景
(1) 用户在输入框中连续输入一串字符后,只会在输入完后去执行最后一次的查询ajax请求,这样可以有效减少请求次数,节约请求资源;
(2) window的resize、scroll事件,不断地调整浏览器的窗口大小、或者滚动时会触发对应事件,防抖让其只触发一次;
1.3 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
2.加入防抖后的输入:
<input type="text" name="debounce" id="debounce">
</div>
<script type="text/javascript">
window.onload = function(){
function ajax(content){
console.log('ajax request'+ content)
}
function debounce(fn,delay){
let timer = null;
return function(...args){
let context = this
//每次事件被触发,都会清除当前的timeer,然后重写设置超时调用
if(timer)
clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(context,args)
},delay)
}
}
let inputDebounce = document.getElementById('debounce')
let debounceAjax = debounce(ajax,500)
inputDebounce.addEventListener('keyup',function(e){
debounceAjax(e.target.value)
})
</script>
</body>
</html>
2.节流函数(throttle)
2.1 什么是节流
- 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。
2.2 应用场景
-
(1)鼠标连续不断地触发某事件(如点击),只在单位时间内只触发一次;
-
(2)在页面的无限加载场景下,需要用户在滚动页面时,每隔一段时间发一次 ajax 请求,而不是在用户停下滚动页面操作时才去请求数据;
-
(3)监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断;
2.3 实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"></style>
</head>
<body>
<div>
2.加入节流后的输入:
<input type="text" name="throttle" id="throttleInput">
</div>
<script type="text/javascript">
window.onload = function(){
function ajax(content){
console.log(content)
}
//节流的实现
function throttle(fn,delay){
let flag = true,
timer = null
return function(...args){
let context = this
if(!flag) return
flag = false;
clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(context,args)
flag = true
},delay)
}
}
let throttleAjax = throttle(ajax,500)
throttleInput.addEventListener('keyup',function(e){
throttleAjax(e.target.value)
})
}
</script>
</body>
</html>
3.小结
总结下防抖和节流的区别:
效果:
- 函数防抖是某一段时间内只执行一次;
- 而函数节流是间隔时间执行,不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
原理:
-
防抖是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,都会清除当前的 timer 然后重新设置超时调用,即重新计时。这样一来,只有最后一次操作能被触发。
-
节流是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器。