防抖与节流(借用第三方插件lodash)

正常情况下，当函数出发频率高时，每触发一次函数，就会触发回调，如果函数中有计算量较大的情况，浏览器就会出现卡顿现象。

防抖：前面所有的触发都会取消，最后一次的执行在规定的时间之后才会触发频繁触 => 只执行一次
（回调是最后一次触发的回调）

节流：在规定的时间间隔范围内，不会触发多次回调，只有大于这个时间才会触发回调。频繁触发 => 少量触发
（回调是第一次触发的回调）

lodash插件：

安装：npm i --save lodash
引用：
var debounce = require('lodash/debounce');
import throttle from 'lodash/throttle'
可参考官网：https://www.lodashjs.com/
Lodash 简介 | Lodash 中文文档 | Lodash 中文网

lodash向外暴露的是_.+函数名()

防抖: _.debounce(fn,waitTime,option)
lodash.debounce | Lodash 中文文档 | Lodash 中文网

节流: _.throttle(fn,waitTime,option)
lodash.throttle | Lodash 中文文档 | Lodash 中文网

举个栗子：

<template><div><button @click="aaa()">点击</button><button @click="bbb()">打印</button></div>
</template><script>
var debounce = require('lodash/debounce');    //两种引用均可，官网有更多引用可参考
import throttle from 'lodash/throttle'export default {methods: {aaa:debounce(function(){this.matte()},2000),    //防抖bbb:throttle(function(){this.matte()},2000,{'trailing': false}),    //节流//{ 'trailing': false }节流定时结束后会再次调用函数，这里关闭matte(){console.log('1111');}}    }
</script>

主页有原生防抖和节流的方法，可供参考

（如有帮助，点赞加关注，追码不迷路）

防抖与节流(借用第三方插件lodash)相关推荐

lodash插件实现防抖和节流
1.应用场景: 当用户高频率的去触发事件,时间较短,内部有计算等会出现卡顿的现象 2.解决方式: 防抖和节流防抖使用的原理:前面所有的触发,是最后一次执行后再规定的时间内触发(只执行一次) 节流 ...
防抖和节流——lodash插件
首先了解一下什么是防抖.节流防抖:当前的所有的触发都被取消,最后一次在规定时间内才会触发,即如果连续快速触发,只会执行一次. 节流:把频繁的触发变为少量的触发,可以给浏览器充裕的时间解析代码防抖就 ...
Javascript防抖函数节流函数的介绍(最详细)、彻底搞懂防抖节流的区别以及使用第三方库的防抖节流函数
文章目录 1.防抖节流函数介绍 1.1 认识防抖节流函数 1.2 认识防抖函数 1.3 防抖函数应用 1.4 认识节流函数 1.5 节流函数应用 1.6 生活中的例子 2.Underscore库 2. ...
lodash的防抖和节流
防抖和节流:主要目的是为了降低高频事件触发,减少dom操作或请求次数,提升性能通常高频事件:onscroll,onresize,keyup/keydown,mousemove 防抖:n 秒后在执行该 ...
vue防抖和节流是什么_防抖和节流为什么重要！！！
是什么防抖和节流两者类似[但并不一样]是用来控制某一函数在特定时间内执行次数的技术点. 什么时候重要在给Dom绑定事件的时候显得尤为重要,因为相当于在事件函数和Dom之间加了一层控制层. 为什么重 ...
【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
一张图搞清楚防抖和节流的区别
1.防抖(debounce) 指在时间n内,函数被触发多次,但是只执行一次,执行最新的触发.也就是在时间n内,碰到新的触发,就清除之前的,重新计时. 最简单的实现 function debounce( ...
前端战五渣学JavaScript——防抖、节流和rAF
看了<JavaScript高级程序设计>和网上的一些博客,感觉对函数节流和函数防抖的概念是反的,以下我写的关于防抖和节流的概念取决于多数人的概念吧,并且基于伦敦前端工程师David Cor ...
防抖节流_关于防抖和节流
虾扯蛋之函数防抖和节流 - 掘金先贴贴这个哥们的. 因为我看了很多,感觉大多都是复制.没有啥思考在介绍以下这些问题的时候.先公示下我思考的时候出现的问题 1.如果你使用 onclick 和 ad ...

防抖与节流(借用第三方插件lodash)

防抖与节流(借用第三方插件lodash)相关推荐

最新文章

热门文章