1：作用
解决了疯狂点击导致页面一直加载的问题，和后台疯狂接到请求的问题
杜绝前端页面由于连续加载产生抖动，和后台连续不断请求浪费流量的问题
2：原理
在加载时候，只要再次触发，就会自动延时执行事件函数。在一定时间没触发，事件函数才会开始执行。（意味着定时器在每次点击后都会重置）
3：例子
要求：在我输入停止1s后打印 要做到图中那般控制力，嘿嘿
<body>
<input type="text" id="input">
<script>
var input = document.getElementById('input')
// 防抖
function debounce(delay, callback) {
let timer
// 闭包：函数里面return出函数
return function (value) {
clearTimeout(timer)
// 想清除的是setTimeout,应该储存timer这个变量
// timer变量需要一直保存在内存中
// 既然不想打印1s内的输入结果，那就清除触发的定时器
// 应该储存timer这个变量，需要一直保存在内存中，内存泄漏-闭包
timer = setTimeout(function () {
// console.log(value);
callback(value)
}, delay)
}
}
// 现实中不需要log类型，所以我们在这行拿到数据
function fn(value) {
console.log(value);
}
// 要求
var debounceFunc = debounce(1000, fn)
input.addEventListener('keyup', function (e) {
debounceFunc(e.target.value)
})
</script>
</body>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！