防抖和节流
防抖
/*
应用场景: 当用户进行了某个行为(如点击)之后,不希望每次行为都会触发方法,而是行为做出后,一段事件内没有再次重复行为,才给用户响应.
实现原理: 每次触发事件时设置一个延时调用方法,并且取消之前的延时调用方法
*/
快捷实现： lodash
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入第三方文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
<input type="text" id="inp">
<script>
// 当前使用第三方js库实现防抖效果
// _
// _.debounce(function,delay)
var inp = document.getElementById("inp");
var count = 0;
// 使用内置的防抖函数
inp.oninput = _.debounce(search,1000)
function search(){
count++;
console.log("发起了"+count+"次请求");
}
</script>
</body>
</html>
自定义：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="inp">
<script>
// 封装自定义防抖函数
/**
* @param {function} func 执行业务逻辑的函数
* @param {number} delay 延迟函数执行的时间
*/
function myDebounce(func,delay){
// func == search 函数
// delay == 1000
var timer;
return function(){
var a = arguments; //获取实参集合 伪数组
var t = this;
// 先清除原来的那个执行方法的定时器
clearTimeout(timer);
timer = setTimeout(function(){
func.apply(t,a)
},delay)
}
}
// 使用自定义函数实现防抖效果
var inp = document.getElementById("inp");
var count = 0;
// 使用自定义的防抖函数
inp.oninput = myDebounce(search,1000)
function search(e){
count++;
console.log("发起了"+count+"次请求");
}
</script>
</body>
</html>
节流
概述：
/*
应用场景:用户进行高频事件触发(滚动)，但会限制在n秒内只会执行一次。
实现原理: 每次触发时间的时候，判断当前是否存在等待执行的延时函数
*/
快捷实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入第三方文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
<input type="text" id="inp">
<script>
// 当前使用第三方js库实现节流效果
// _
// _.throttle(function,delay)
var inp = document.getElementById("inp");
var count = 0;
// 使用内置的节流函数
inp.oninput = _.throttle(search,1000)
function search(){
count++;
console.log("发起了"+count+"次请求");
}
</script>
</body>
</html>
自定义：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id="inp">
<script>
// 封装自定义节流函数
/**
* @param {function} func 执行业务逻辑的函数
* @param {number} delay 延迟函数执行的时间
*/
function myThrottle(func,delay){
var ctime = 0; // 初始时间
return function(){
//获取触发当前函数的时间戳
var ntime = new Date().getTime();
if( ntime - ctime > delay ){
func.apply(this,arguments);
ctime = ntime; //0 ==>第一次触发函数的时间
}
}
}
// 使用自定义函数实现节流效果
var inp = document.getElementById("inp");
var count = 0;
// 使用自定义的节流函数
inp.oninput = myThrottle(search,1000)
function search(e){
count++;
console.log("发起了"+count+"次请求");
}
</script>
</body>
</html>
区别：
区别:节流不管事件触发多频繁保证在一定时间内一定会执行一次函数。防抖是只在最后一次事件触发后才会执行一次函数