ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

节流防抖笔记

2022-02-28 11:36:09  阅读:142  来源: 互联网

标签:触发 防抖 节流 search 笔记 _. let lodash


# 1、  npm i --save lodash
# 2、对应的页面引入 import _ from 'lodash'


# 防抖:_.debounce   原理:原理是在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。也就是说事件来了,先setTimeout定个时,n秒后再去触发回调函数。它和节流的不同在于如果某段时间内事件以间隔小于n秒的频率执行,那么这段时间回调只会触发一次。节流则是按照200ms或者300ms定时触发,而不仅仅是一次
应用场景:比如通过搜索过滤一个列表,通过“@change=“search”监听输入向后台发起请求,如果每输入一个字母就调用一次”search“向后台发送一次请求,效率将会很低,如果可以将调用search函数控制在一定时间内,比如1秒内,在这一秒钟,我输入了5个字母,search函数被调用了5次,但是只向后台发送一次请求,是不是效率就会提升很多,不需要频繁调接口。
例:searchBtn:_.debounce(function(){         let that=this         console.log(1111111)         },3000),



# 节流: _.throttle 原理 :让一个函数不要执行得太频繁,减少一些过快的调用来节流。也就是在一段固定的时间内只触发一次回调函数,即便在这段时间内某个事件多次被触发也只触发回调一次。
# 注意 let that=this  重新定义指向
例: searchBtn:_.throttle(function(){              let that=this             console.log(1111111)         },10000),



官方文档 :https://lodash.com/ 博文相关链接 :https://segmentfault.com/a/1190000017227559

标签:触发,防抖,节流,search,笔记,_.,let,lodash
来源: https://www.cnblogs.com/wangye123/p/15944854.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有