js防抖节流及应用场景

Robo12138

已于 2022-09-26 00:33:58 修改

阅读量1.6k

点赞数 1

分类专栏： js笔记文章标签：前端 javascript es6

于 2022-03-30 20:36:49 首次发布

本文链接：https://blog.csdn.net/eilan_chiu/article/details/123719895

版权

本文探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，防抖常用于搜索框的输入事件，确保用户停止输入后再执行，而节流则适用于滚动加载数据等场景。文章介绍了两种技术的实现方式，包括setTimeout和时间戳的使用。

摘要由CSDN通过智能技术生成

一、js防抖debounce

js防抖，即事件触发后要过一定时间后才可以继续执行，应用场景，例如如搜索提示，我们在搜索的时候会出现搜索提示，即通过input的input事件发送请求数据，这是一个很频繁的请求，但是我们不希望用户在输入过程中发送请求，即在停顿或停止的时候请求一下数据
实现方法：通过 setTimeOut延时处理

//防抖debounce代码：
function debounce(fn,delay) {
 let timeout = null，
 isFirstTime = true
 return function() {
     //第一次执行不用延时
     if(isFirstTime){

       fn.apply(this,arguments)
       isFirstTime = false;
     }
     // 每当用户输入的时候把前一个 setTimeout clear 掉
     clearTimeout(timeout); 
     // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
     timeout = setTimeout(() => { //使用箭头函数不用保存this
         fn.apply(this, arguments);
     }, delay || 500);
 };
}

//测试拉动窗口查看输出
window.onresize = debounce(function(){
 console.log(1)
},1000)