标签：function 触发 防抖 节流 timer js say new hello
一、防抖debounce（多次触发 只执行最后一次）
- 作用：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
- 类似于回城8秒，如果回城中被打断，再次回城需要再等8秒
- 应用场景：搜索提示；搜索时不断输入，用防抖来节约请求资源
<body>
<input type="text">
<script>
function debounce(callback, delay) {
let timer
return function () { // 闭包
clearTimeout(timer) // 清除上次的timer
timer = setTimeout(() => {
callback(...arguments)
}, delay)
}
}
function say_hello(str) { // 事件触发函数
console.log(str);
}
const new_say_hello = debounce(say_hello, 1000) // 重构事件触发函数
const input = document.querySelector('input')
input.addEventListener('keyup', e => {
new_say_hello(e.target.value)
})
</script>
</body>
二、防抖throttle（规定时间内 只触发一次）
- 作用：限定事件在一定时间内只能执行一次
- 节流类似于平A,受攻速的限制
- 应用场景：监听滚动条滚动加载数据，即边滚动边加载;鼠标多次点击只触发少次
<body>
<button>点击</button>
<script>
function throttle(callback, delay) {
let timer // 节流阀
return function () { // 闭包
if (!timer) {
timer = setTimeout(() => {
callback(...arguments)
timer = null // 回调函数执行完放开节流阀
}, delay)
}
}
}
function say_hello(str) {
console.log(str);
}
const new_say_hello = throttle(say_hello, 1000)
const btn = document.querySelector('button')
btn.addEventListener('click', e => {
new_say_hello('点击了')
})
</script>
</body>
标签：function,触发,防抖,节流,timer,js,say,new,hello 来源： https://www.cnblogs.com/zhanxinbing/p/16302859.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。