函数节流和函数防抖两个都是优化高频率执行js代码的一种手段。
基本概念:
函数节流: 在一定时间内js方法只跑一次(比如人的眨眼睛,就是一定时间内眨一次)。这是函数节流最形象的解释;
函数防抖: 指频繁触发的情况下,只有足够的空闲时间,才执行代码一次(比如生活中的坐公交,就是一定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,司机才开车);
两者的区别:
函数防抖和函数节流都是防止某一时间频繁触发,但是它们的原理不一样;
函数防抖是某一段时间内只执行一次,而函数节流是间隔时间执行;
使用节流防抖函数(性能优化)
在 vue
中的使用:
第一步: 在公共方法中(如 untils.js 中)
,加入函数防抖和节流方法:
// 防抖
export function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
第二步:
在需要使用的组件引用:
import { _debounce } from "@/utils/public"
;
第三步:
在 methods 中使用:
methods: {
// 改变场数
changefield: _debounce(function(_type, index, item) {
// do something ...
}, 200)
}
函数节流(throttle)
规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,
只有一次生效
。
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//节流函数
function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
//模拟一段ajax请求
function ajax(content){
console.log('ajax request ' + content)
};
let inputa = document.getElementById('unDebounce');
function fn(e){ ajax(e.target.value) }
//防抖节流,无论你输入多块,每隔1秒钟执行一次
inputa.addEventListener('input', _throttle(fn,1000))
</script>
看下运行效果:
由此可见:不管我们设定的执行时间间隔多小
,总是1s内只执行一次
。
函数防抖(debounce)
在事件被触发n秒后再执行回调,如果在这
n秒内又被触发,
则重新计时
。
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//模拟一段ajax请求
function ajax(content){
console.log('ajax request ' + content)
};
letinputa = document.getElementById('unDebounce');
function fn(e){ ajax(e.target.value) }
//防抖函数,处理多次被触发的事件,只执行最后一次
inputa.addEventListener('input', fn)
</script>
以下是运行结果:
由此可见:我们只要输入一个字符,就会触发这次ajax请求
。不仅从资源上来说是很浪费的行为,而且实际应用中,用户也是输出完整的字符后,才会请求。
接下来是优化:
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//防抖函数
function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer = null;
fn.apply(th, args);
}, delay);
};
}
//模拟一段ajax请求
function ajax(content){
console.log('ajax request ' + content)
};
let inputa = document.getElementById('unDebounce');
function fn(e){ ajax(e.target.value) }
//防抖函数,处理多次被触发的事件,只执行最后一次
inputa.addEventListener('input', _debounce(fn,1000))
</script>
看一下效果:
由此可见:我们加入了防抖
以后,当你在频繁的输入时
,并不会
发送请求,只有当你在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。