❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
个人名言:不可控之事 乐观面对
系列专栏:
节流是为了限制函数的执行次数,而防抖是为了限制函数的执行时机。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script>
function debounce(f, duration) {
var prevId;
return function (...args) {
clearTimeout(prevId);
prevId = setTimeout(() => {
f.call(this,...args);
}, duration);
};
}
window.addEventListener(
"resize",
debounce((e) => {
window.resizeTo(600, 600);
}, 1000)
);
script>
head>
<body>body>
html>
节流是为了限制函数的执行次数,而防抖是为了限制函数的执行时机。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<script>
function throttle(f, time) {
var latestArgs; //保存最近的一次参数,以传给原函数
var anpaiguo = false;
var lastRunTime = 0;
return function (...args) {
latestArgs = args;
if (Date.now() - lastRunTime > time) {
lastRunTime = Date.now();
return f.call(this, ...latestArgs);
}
if (!anpaiguo) {
setTimeout(() => {
lastRunTime = Date.now();
f.call(this, ...latestArgs);
anpaiguo = false;
}, time);
anpaiguo = true;
}
};
}
window.addEventListener(
"resize",
throttle((e) => {
window.resizeTo(600, 600);
}, 1000)
);
script>
head>
<body>body>
html>
补充:reduce,filter,map函数
…扩展运算符它可以将一个数组或类数组对象“展开”成一个逗号分隔的列表。在这个例子中([…new Set(arr)]),…new Set(arr2)将Set对象转换为一个数组,然后将该数组展开成一个逗号分隔的列表。
var arr = [1, 2, 3]
// 计算总数
var ret1 = arr.reduce((pre, current)=>{
pre += current
return pre
}, 0)
console.log(ret1) // 6
// filter (过滤)
var ret2 = arr.filter(item =>{
return item > 2
})
console.log(ret2) // [3]
// map
var ret3 = arr.map(item =>{
return {id:item}
})
console.log(ret3) // [{id: 1}, {id: 2}, {id: 3}]
————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章