防抖节流函数
基础知识以及lodah库使用 请点击 (7条消息) lodash中防抖和节流的应用_weixin_52770885的博客-CSDN博客
节流函数:利用闭包知识,将timer存储在内存中,在一段时间内只会执行一次定时器中的代码
<body>
<button>按钮</button>
<script>
//获取节点
var btn = document.querySelector('button')
//绑定事件
btn.addEventListener('click', function(e) {
//调用节流函数
throttleRun()
})
var throttleRun = throttle(fn, 1000)
//定义节流函数
function throttle(callback, delay) { //callback是回调函数,delay为时间
let timer
//由于每次调用throttle函数,timer都会重新声明(那么timer的值一直未undefined),所以要将timer存储在内存中,则可以利用闭包知识,返回一个函数
return function() {
if (!timer) {
//设置定时器
timer = setTimeout(function() {
//执行回调函数
callback()
//保证每次执行完仍可以执行下一次操作,将timer重新赋值为空
timer = null
}, delay)
}
}
}
//定义回调函数
function fn(e) {
//里面可以写一些业务逻辑
console.log(Math.random()); //打印一个随机数
}
</script>
</body>
场景说明:
防抖函数:利用闭包知识,将timer存储在内存中,不断触发则会一直清除定时器,则最后一次触发一段时间后则会执行定时器中的代码
<body>
<input type="text" name="" id="">
<script>
//获取节点
var input = document.querySelector('input')
//绑定事件
input.addEventListener('keyup', function(e) { //传入event
//调用函数
debounceRun(e.target.value)
})
var debounceRun = debounce(fn, 1000)
//定义防抖函数
function debounce(callback, delay) {
//声明一个timer,初始值为undefined
let timer;
//由于每次执行debounce函数时都会重新定义timer(timer的初始值永远是undefined),
//所以要将timer存储在内存中,运用到闭包知识,返回一个函数
return function(value) { //接收e.target.value
//清空原来的定时器
clearTimeout(timer);
//设置定时器
timer = setTimeout(function() {
fn(value)
}, delay)
}
}
//定义回调函数
function fn(value) {
console.log(value);
}
</script>
</body>
场景说明: