本文主要是介绍防抖与节流,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="input1" type="text">
<input class="input2" type="text">
<script>
// 1、防抖
var ipt1 = document.querySelector('.input1')
var timer1 = null
ipt1.addEventListener('input',() => {
// 事件触发首先要清除定时器
clearTimeout(timer1)
timer1 = setTimeout(()=>{
console.log('防抖')
},2000)
})
// 2、节流
var timer2 = null
var ipt2 = document.querySelector('.input2')
ipt2.addEventListener('input',() => {
if(timer2) return
timer2 = setTimeout(()=>{
console.log('节流')
timer2 = null
},2000)
})
</script>
</body>
</html>
这篇关于防抖与节流的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!