函数防抖和节流
2017-09-05 本文已影响75人
it之承影含光
一、什么是函数节流
函数节流：是确保函数特定的时间内至多执行一次。
1.函数节流的原理
函数节流的原理挺简单的，当第一次触发函数执行时，创建一个定时器，延迟这个事件，如果在当前时间内再次触发，就清除原来的定时器，重新创建一个定时器，延迟执行。
2.应用场景
搜索联想/mousemove/keydown/高频率的点击
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数节流</title>
</head>
<body>
<script>
//函数节流
const throttle = (fun, delay) => {
let last = null;
return () => {
//获取毫秒数
const now = +new Date();
if (now - last > delay * 1000) {
fun();
last = now;
}
}
}
//实例函数
const throttleDemo = throttle(() => console.log('throttleDemo'), 1);
//函数调用
throttleDemo();
</script>
</body>
</html>
二、什么是函数防抖
函数防抖：是函数在特定的时间内不被再调用后执行。
1.函数防抖的原理
如果函数多次触发，则把上次记录的定时器清掉，重新开始。如果计时完毕，没有方法进来访问触发，则执行代码。
2.应用场景
多用在onresize跟onscroll，这两个事件一个在页面放大缩小时触发一个在页面滚动时触发，都是连续不断的触发的
3.代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数防抖</title>
</head>
<body>
<script>
//函数防抖
const debouce = (fun, delay) => {
let timer = null;
return () => {
clearTimeout(timer);
timer = setTimeout(() => {
fun();
}, delay * 1000);
};
};
//实例函数
const debouceDemo = debouce(() => console.log('debouceDemo'), 1);
//函数调用
debouceDemo();
</script>
</body>
</html>
