防抖是一种常用的前端技术,用于限制在短时间内频繁触发某个事件或执行某个函数。防抖可以避免在一连串触发事件中过多地执行响应函数,从而提高性能和响应速度。
- 具体来说,防抖通过设置一个等待时间(延迟时间)来控制触发事件后的响应操作。当触发事件后,防抖会等待一定的延迟时间,如果在该时间内没有再次触发该事件,则执行相应的操作;如果在延迟时间内又触发了该事件,则重新计时,并等待延迟时间后执行操作。通过这种方式,防抖可以确保只在最后一次触发事件后的延迟时间内执行相应的操作,从而减少不必要的重复执行。
- 防抖在用户输入、搜索框自动补全、窗口调整大小等场景下非常常见,可以有效地控制频繁触发的情况,提升用户体验和页面性能
实现思路
1)先在body内写入一个输入框
2)在let一个全局的timeid,再找到这个输入框给她注册input事件,先关闭定时器,再开启延时器,直到停止的时间超过1秒之后再开启延时器,此时就实现了一个简单的输入框防抖效果
<!DOCTYPE html>
<html>
<head>
<title>Debounce Example</title>
</head>
<body>
<input type="text" id="input">
<script>
let timeId
document.querySelector('#input').addEventListener('input',()=>{
clearTimeout(timeId)
timeId = setTimeout(()=>{
console.log('防抖成功');
},1000)
})
</script>
</body>
</html>