前端必备-防抖节流

怼烎@ 2022-08-29 11:58 154阅读 0赞

### 文章目录 ###

*   *  前端必备-防抖节流

## 前端必备-防抖节流 ##

**防抖节流—优化思想**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
**js中有一个工具：`lodash` 实现了防抖节流**  
**防抖：debounce 、节流：throttle**

> **函数防抖**

**原理**：当持续触发一个事件时，在n秒内，事件没有再次触发，此时才会执行回调；如果n秒内，又触发了事件，就重新计时。

**适用场景：**

*  search远程搜索框：防止用户不断输入过程中，不断请求资源，n秒内只发送1次，用防抖来节约资源
 *  按钮提交场景，比如点赞，表单提交等，防止多次提交
 *  监听resize触发时， 不断的调整浏览器窗口大小会不断触发resize，使用防抖可以让其只执行一次

**辅助理解：在你坐电梯时，当一直有人进电梯（连续触发），电梯门不会关闭，在一定时间间隔内没有人进入（停止连续触发）才会关闭。**

> **函数节流**

**原理**：当频繁的触发一个事件，每隔一段时间， 只会执行一次事件。  
**适用场景：**

*  拖拽场景：固定时间内只执行一次， 防止高频率的的触发位置变动
 *  监听滚动事件：实现触底加载更多功能
 *  屏幕尺寸变化时， 页面内容随之变动，执行相应的逻辑
 *  射击游戏中的mousedown、keydown时间

<html>
    <head>
    	<title>防抖和节流</title>
    	<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
    </head>
    <body>
    	<input id="search" type="text" />
    	<div id="content" style="height:150px;line-height:150px;text-align:center;color:white;background-color:#333;"></div>
    	
    	<script> //let search = document.getElementById("search"); //let content = document.getElementById("content"); //let num = 1; //function count(){ // console.log("发送数据请求。。。"); // content.innerHTML = num++; //} //search.onkeyup = _.debounce(count,2000); //防抖（再次输入则重新计算 取消定时器） 复杂数据转换-递归 //search.onkeyup = _.throttle(count,2000); //节流（固定时间发送，不会重新计算） //若改造一下代码 var obj = { num:1, count:function(n){ console.log("发送数据请求。。。",n); content.innerHTML = this.num++; } } //自己手写代码 //防抖 function debounce(fn,time,num){ let timeout; return function(){ if(timeout) clearTimeout(timeout) timeout = setTimeout(()=>{ fn.apply(obj,[num]) //第一个参数 作用域 //call(obj,num) //fn() //this指向为windows },time) } } search.onkeyup = debounce(obj.count,2000,10); //节流 function throttle(fn,time){ let timeout; //第一次 undefined-false return function(){ //if(timeout==undefined || timeout==""){ if(!timeout){ //自动类型转换 timeout = setTimeout(()=>{ //setTimeout 延迟执行 //先清除之前的任务 timeout = undefined; //调用函数 fn.apply(obj) },time) } } } search.onkeyup = throttle(obj.count,2000); //time 先记录一次时间 再不断对比 function throttle2(fn,time){ let prev = 0; //旧时间点 return function(){ let now = Date.now(); if(new - prev > time){ fn.apply(obj); prev = now; } } } search.onkeyup = throttle2(obj.count,2000); </script>
    </body>
    </html>

参考文献：  
[https://mp.weixin.qq.com/s?\_\_biz=MzAxMTMyOTk3MA==&mid=2456451562&idx=1&sn=73910cc04c9de46668869cc6f01068a3&chksm=8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb&mpshare=1&scene=24&srcid=0727lOUSK6DUauV84jIvUTJ7&sharer\_sharetime=1627393410423&sharer\_shareid=974ccd5c7437aef4c0fe1590ef081d17\#rd][https_mp.weixin.qq.com_s_biz_MzAxMTMyOTk3MA_mid_2456451562_idx_1_sn_73910cc04c9de46668869cc6f01068a3_chksm_8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb_mpshare_1_scene_24_srcid_0727lOUSK6DUauV84jIvUTJ7_sharer_sharetime_1627393410423_sharer_shareid_974ccd5c7437aef4c0fe1590ef081d17_rd]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20220829/147323c58c66418faa785becf217c330.png
[https_mp.weixin.qq.com_s_biz_MzAxMTMyOTk3MA_mid_2456451562_idx_1_sn_73910cc04c9de46668869cc6f01068a3_chksm_8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb_mpshare_1_scene_24_srcid_0727lOUSK6DUauV84jIvUTJ7_sharer_sharetime_1627393410423_sharer_shareid_974ccd5c7437aef4c0fe1590ef081d17_rd]: https://mp.weixin.qq.com/s?__biz=MzAxMTMyOTk3MA==&mid=2456451562&idx=1&sn=73910cc04c9de46668869cc6f01068a3&chksm=8cdc1137bbab982139794193689c60e3485d9ba539cc48e8b95ca3ec9003f317f7742a716adb&mpshare=1&scene=24&srcid=0727lOUSK6DUauV84jIvUTJ7&sharer_sharetime=1627393410423&sharer_shareid=974ccd5c7437aef4c0fe1590ef081d17#rd