节流与防抖(附代码)

夜斗(dou)

已于 2023-05-16 16:29:04 修改

阅读量334

点赞数

文章标签： react.js javascript Powered by 金山文档

于 2022-12-29 21:16:10 首次发布

本文链接：https://blog.csdn.net/jyl919221lc/article/details/128487993

版权

正常，节流，防抖区别演示

节流：

特点：如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数，不管在这个中间有多少次触发这个事件，执行函数的频次总是固定的；

应用场景：

游戏中的一些设计--王者荣耀英雄的普攻；

监听页面的滚动事件；

鼠标移动事件；

用户频繁点击按钮操作；

实现方式：

//第三方库实现
<input type="text"> <!--html标签-->

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const inputEl = document.querySelector("input")
let counter = 0
const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
}

// 节流处理
inputEl.oninput =_.throttle(inputChange, 2000)//当用户不断触发事件按照2秒的频率执行
</script>

//手动实现
//js   封装throttle方法
function throttle(fn, interval, options) {
    // 1.记录上一次的开始时间
    let lastTime = 0
  
    // 2.事件触发时, 真正执行的函数
    const _throttle = function(e) {
  
      // 2.1.获取当前事件触发时的时间
      const nowTime = new Date().getTime()
  
      // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
      const remainTime = interval - (nowTime - lastTime)
      if (remainTime <= 0) {
        // 2.3.真正触发函数
        fn.apply(this,[e])
        // 2.4.保留上次触发的时间
        lastTime = nowTime
      }
    }
  
    return _throttle
  }

//使用位置
<body>
    <input type="text">
</body>
<script src="./jieliu.js"></script>
<script>
    const inputEl = document.querySelector('input')
    let counter = 0
    const inputChange = function (e) {
        console.log(`发送了${++counter}次网络请求`, this, e);
    }
    inputEl.oninput = throttle(inputChange, 2000)
</script>

防抖：

特点：当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间(非常短的时间)，当事件密集触发时，函数的触发会被频繁的推迟，只有等待了一段时间也没有事件触发，才会真正的执行响应函数

应用场景：

输入框中频繁的输入内容，搜索或者提交信息；

频繁的点击按钮，触发某个事件；

监听浏览器滚动事件，完成某些特定操作；

用户缩放浏览器的resize事件；

实现方式：

//第三方库实现
<input type="text"> <!--html标签-->

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
const inputEl = document.querySelector("input")
let counter = 0
const inputChange = function(event) {
      console.log(`发送了第${++counter}次网络请求`, this, event)
}

// 防抖处理
inputEl.oninput = _.debounce(inputChange, 2000)//当用户停止输入的时候延时2秒后执行
</script>

//手动实现
//js   封装debounce方法
function debounce(fn,timeout) {
    var timer
    return function(e) {
        if(timer){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            fn.apply(this,[e])
        },timeout)
    }
}

//使用位置
<body>
    <input type="text">
</body>
<script src="./fangdou.js"></script>
<script>
    const inputEl = document.querySelector('input')
    let counter = 0
    const inputChange = function(e) {
        console.log(`发送了${++counter}次网络请求`,this,e);
    }
    inputEl.oninput = debounce(inputChange,1000)
</script>

夜斗(dou)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节流与防抖(附代码)

react节流防抖
复制链接

扫一扫

节流与防抖(附代码)

正常，节流，防抖区别演示

节流：

防抖：

“相关推荐”对你有帮助么？