防抖和节流@H_404_5@
使用防抖和节流是为了性能优化
在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: {
// 改变场数
changefield: _debounce(function(_type, index, item) {
// do something ...
}, 200)
}
函数防抖
在事件被触发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>
<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>
我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。
个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。
函数节流(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>
个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。
总结
函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
