文章目录
前置知识
关于this指向问题,防抖函数中的fn.apply(this,arguments)作用
防抖函数中的fn.apply(this,arguments)作用
节流
- 一定时间内只执行一项任务
节流原理
- 执行一个函数
- 执行这个函数的时候看看前面有没有执行过
- 如果前面有执行过这个函数并且没有完成,那么本次任务就不执行
节流前
可以看到"move"疯狂输出
节流后
程序输出move的次数明显减少
节流函数
/**
* 节流
* @param {function} fn 要节流的函数
* @param {number} delay 延迟(类似于fps一样~)
* return 执行函数
*/
function throttleMy(fn, delay) {
//这样子建立了一个闭包,timer始终存在
var timer=null;
return function (...args) {
if (timer) {
return;
}
timer = setTimeout(function () {
//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
fn.apply(this, args);
timer=null;
}, delay);
}
}
节流函数使用示例代码
<!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></title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
top: 100px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
var box = document.querySelector(".box");
window.onmousemove=throttleMy(function(e){
box.style.left = e.pageX - (box.clientWidth) / 2 + "px";
box.style.top = e.pageY - (box.clientHeight) / 2 + "px";
},40)
/**
* @param {function} fn 要防抖的函数
* @param {number} delay 延迟(类似于fps一样~)
* return 执行函数
*/
function throttleMy(fn, delay) {
//这样子建立了一个闭包,timer始终存在
var timer=null;
return function (...args) {
if (timer) {
return;
}
timer = setTimeout(function () {
//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
fn.apply(this, args);
timer=null;
}, delay);
}
}
</script>
</body>
</html>
防抖
防抖原理
- 执行一个函数
- 执行这个函数的时候一段时间后如果有东东再次执行这个函数,则重新计时后在次调用
防抖前
输入框输入"你好"
防抖后
输入框再次输入"你好"
可以看到少了很多次
防抖函数
/**
* 防抖
* @param {function} fn 要防抖的函数
* @param {number} delay 延迟(类似于fps一样~)
* return 执行函数
*/
function debounce(fn, delay) {
//这样子建立了一个闭包,timer始终存在
var timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer); //清除上一次的
}
timer = setTimeout(function () {
//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
fn.apply(this, args);
timer = null;
}, delay);
}
}
防抖函数使用示例代码
<!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>Document</title>
</head>
<body>
账户:<input type="text" id="useript">
<script>
var ipt = document.getElementById("useript");
ipt.onkeyup=debounce(function(e){
console.log(e);
},40);
/**
* 防抖
* @param {function} fn 要防抖的函数
* @param {number} delay 延迟(类似于fps一样~)
* return 执行函数
*/
function debounce(fn, delay) {
//这样子建立了一个闭包,timer始终存在
var timer = null;
return function (...args) {
if (timer) {
clearTimeout(timer); //清除上一次的
}
timer = setTimeout(function () {
//传入的为[30,40,50....这种形式],所以不能单纯fn(args)
//不确定参数,加上参数形式为[....],就使用fn.apply(this.args);
fn.apply(this, args);
timer = null;
}, delay);
}
}
</script>
</body>
</html>
娱乐一刻
"昨晚你终于回我信息了,你回了一句谢谢还加了一个爱心。当时我在工地上激动的差点把隔壁的吊塔阿姨给亲了。不过我想了想你笑起来的样子我还是忍住了。你给我发爱心,一定是已经爱上我了吧,放心,我连咱们的孩子名字都想好了。XX等我,我一定会继续努力挣钱,给你买更多的化妆品,发更多的红包!!"