内容
在开发中常常会遇到函数的连续触发和高频次触发的情况。解决这些问题使用防抖和节流是最好不过的了。Lodash可以帮助我们实现。
lodash安装命令
npm install --save lodash
lodash.js文件下载地址： www.bootcdn.cn/lodash.js/
实例演示
防抖：前面所有的触发都被取消，最后一次执行在规定时间之后才会触发，也就是说如果连续快速的触发只会执行一次。防止多次触发同一个事件。
<head>
<meta charset="UTF-8">
<title>防抖</title>
<!--引入lodashjs 也可以下载下来 -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
</head>
<body>
<p>
请输入内容：<input type="text">
</p>
</body>
<script>
let input=document.querySelector('input');
//未使用防抖前 文本发生变化立即执行
/*input.oninput=function () {
console.log('ajax请求')
}*/
// lodash函数库对外暴露_函数
//console.log(_);
//解决防抖 使用lodash的debounce函数 [闭包+延时器]
input.oninput=_.debounce(function () {
console.log('ajax发请求') //一秒后发请求
},1000)
</script>
节流：在规定的时间间隔不会重复触发回调，只有在大于这个时间间隔才会触发回调，把频繁的触发变为少量触发。控制高频触发的次数。
<head>
<meta charset="UTF-8">
<title>节流</title>
<!--此处是先将lodash下载到本地 本地项目中直接引用lodashjs-->
<script src="lodash.js"></script>
</head>
<body>
<div>
<h1>
计数器<span>0</span>
</h1>
<button>点击+1</button>
</div>
</body>
<script>
//获取节点
let span=document.querySelector('span');
let button=document.querySelector('button');
let count=0;
/*// 未使用节流前 点击一次执行一次
button.onclick=function () {
count++;
span.innerHTML=count;
};*/
// 节流后一秒执行一次
button.onclick=_.throttle(function () {
count++;
span.innerHTML=count;
},1000)
</script>
