【复习】手撕防抖和节流

最新推荐文章于 2023-08-01 13:13:34 发布

前端亦可行

最新推荐文章于 2023-08-01 13:13:34 发布

阅读量114

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_68164546/article/details/126087999

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一·防抖
二·递归

一·防抖

JavaScript之实现一个简单的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    防抖： <input type="text">
</body>
<script>
    // 获取Dom元素
     const input = document.querySelector('input')
     // 给定一个初始值，建议为-1，因为你不能保证页面中是否还存在其他定时器
     let time = -1
     // 添加事件
     input.addEventListener('input',() => {
        // 清除上一次的定时器效果
         clearTimeout(time)
         // 
        time = setTimeout(()=> {
            console.log('执行一次')
        },2000)
     })
</script>
</html>

二·递归

<!DOCTYPE html>
<html lang="en">
<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>
  <button>节流按钮</button>
</body>
<script>
  // 方法一：使用定时器
const button = document.querySelector('button')
let num = true
button.addEventListener('click',() => {
  if (num) {
  num = false
 setTimeout(() => {
  console.log('执行一次')
  num = true
 },2000)
  }
})

// 方法二：使用时间戳
// const button = document.querySelector('button')
// let x = 0
// button.addEventListener('click',() => {
//   let t = new Date()
//   // console.log(t);
//   if (t - x > 2000) {
//     console.log('执行了')
//     x = t
//   }
// })

</script>
</html>