面试常见的手写题,防抖和节流,写的是最简单版本的,但是能实现
一、防抖,目的让1秒内随便输入只显示最后一次
<body>
防抖:<input type="text">
</body>
<script>
const input = document.querySelector('input')
let timer = -1
input.addEventListener('input',()=>{
clearTimeout(timer)
timer=setTimeout(()=>{
console.log('执行了')
},1000)
})
</script>
二、节流,目的按钮点击多次,也只会在2秒后生效一次
时间戳方案
<body>
<button>节流</button>
</body>
<script>
const btn = document.querySelector('button')
let n =0
btn.addEventListener('click',()=>{
let t = new Date()
if(t-n>2000){
console.log('执行了')
n = t
}
})
</script>
定时器方案
const btn = document.querySelector('button')
let num = true
btn.addEventListener('click',()=>{
if(num){
num = false
setTimeout(()=>{
console.log('执行')
num=true
},2000)
}
})