vue基础之函数防抖与节流

2022-07-08 18:02:41 阅读：156 来源： 互联网

问题

正常：事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

概念：

防抖：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次。
通俗的讲，只会在输入完，1s后，才会调用回调函数，下方是lodash封装好的防抖函数与节流函数（大佬可通过延迟器、闭包自己实现）
git下载链接：https://github.com/lodash/lodash 复制在项目中，用script引入

api文档: https://lodash.com/docs/4.17.15#debounce   其中debounce防抖需要用到的，单词翻译n.跳讯去除;反跳动 v.反跳动
例子：
  //与Jquery的“$”相似，引入后对外暴露的是“_”
    input.oninput = _.debounce(function(){
        console.log(_())
    },1000)

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发
通俗的讲，1s中，不管你触发多少次，只有第一次会调用

api文档:https://lodash.com/docs/4.17.15#throttle  其中throttle节流需要用到的，单词翻译:v掐死;使窒息;勒死;n节流阀
例子：
    button.onclick = _.throttle(function(){
        console.log(_())
    },1000)

标签：触发,防抖,vue,throttle,节流,lodash,函数
来源： https://www.cnblogs.com/suzhitester/p/16459266.html

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

ICode9

vue基础之函数防抖与节流

问题

概念：