防抖和节流

最新推荐文章于 2024-09-09 09:35:48 发布

₯㎕。�

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量146

点赞数 1

分类专栏：防抖和节流文章标签： javascript

本文链接：https://blog.csdn.net/zzpzzpzzpkkk/article/details/118998556

版权

防抖和节流专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、防抖

针对于用户操作数据过于频繁只要最后一次时间的操作，例如input输入框执行函数

<!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>
  <input type="text" />
</body>
</html>
<script>
let app = document.querySelector('input')
  app.oninput = function() {
    console.log(this.value)
  }
</script>

输出结果：
在这里插入图片描述
每按一次执行一次function 现在采用防抖

let app = document.querySelector('input')
  let t = null
  app.oninput = function() {
    if(t) {
      clearTimeout(t)
    }
    t = setTimeout(() => {
      console.log(this.value)
    },500)
  }

输出结果
在这里插入图片描述
只要两次操作之间的时间不超过500毫秒，他就不会执行console.log(this.value)
思路：用户输入
→触发app.oninput对应的function
→判断t是否为null，第一次t是为null的，执行t = setTimeout(() => {console.log(this.value)},500)
→若是500毫秒之内再次操作input执行，这时t不是为空的，所以执行clearTimeout(t)，setTimeout 500毫秒没到，相当于没执行就被清除了，所以不会打印
→以此类推。。。

防抖的闭包实现代码：

  let app = document.querySelector('input')
  app.oninput = debounce(function(){
    console.log(this.value) //如果直接执行fn而不是fn.call(this)，那么这个this指向的是window对象
  },500)
  function debounce(fn,delay){
    let t = null
    return function(){
      if(t){
        clearTimeout(t)
      }
      t = setTimeout(() => {
        console.log(this,'这个this是什么') // <input type="text" />
        fn.call(this) // 将this指向window改成input 
      },delay)
    }
  }

2、节流

节流的作用：控制高频事件执行次数如滚动事件

<!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>
</body>
</html>
<script>
  window.onscroll = function(){
    console.log(123)
  }
</script>
<style>
  body {
    height: 2000px;
  }
</style>

输出结果：
在这里插入图片描述
稍微滚动了一下滚轮就打印了这么多要是这执行的是一些高消耗请求浏览器就可能直接暴毙卡死了

现在采用节流

let flag = true
  window.onscroll = function(){
    if(flag){
      setTimeout(function(){
        console.log(123)
        flag = true
      },1000)
    }
    flag = false
  }

1000毫秒内操作执行最多一次

节流的闭包实现代码和防抖的几乎一模一样

  window.onscroll = throttle(function(){
    console.log(123)
  },1000)
  function throttle(fn,delay) {
    let flag = true
    return function(){
      if(flag){
        setTimeout(function(){
          fn.call(this)
        flag = true
      },1000)
    }
    flag = false
    }
  }

₯㎕。�

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
防抖和节流

1、防抖针对于用户操作数据过于频繁只要最后一次时间的操作，例如input输入框执行函数<!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, in
复制链接

扫一扫

专栏目录