|
目录
应用场景
1. 通过使用underscore loadash等前端工具库里封装的debounce和throttle函数
防抖
节流
2. 自己封装debounce和throttle函数
防抖
节流
防抖与节流属于高级函数的内容，用来解决事件的频繁发生而导致的服务器的宕机。
应用场景
1.scroll事件滚动触发
2.搜索框输入查询
3.表单验证
4.按钮提交事件
1. 通过使用underscore loadash等前端工具库里封装的debounce和throttle函数
防抖
<!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>
<style>
#container {
height: 200px;
background-color: rgb(41, 39, 39);
color: #fff;
text-align: center;
line-height: 200px;
font-style: 30px;
}
</style>
<script src="./underscore.js"></script>
</head>
<body>
<!-- dom容器 -->
<div id="container"></div>
<script>
// 演示事件如何频繁发生
// 获取dom容器
let container = document.querySelector('#container');
// 绑定事件，触发事件频繁发生
let count = 1;
function doSomeThing(e) {
console.log(this); //window
console.log(e); //undefined
// 可能做回调或者是ajax请求
container.innerHTML = count++;
}
// 事件处理函数(doSomeThing)在一定时间(1000)后才执行
// 如果这段时间再次调用，则会重新计算时间，如果超过预定时间，则执行事件处理函数
container.onmousemove = _.debounce(doSomeThing, 1000);
</script>
</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>Document</title>
<style>
#container {
height: 200px;
background-color: rgb(41, 39, 39);
color: #fff;
text-align: center;
line-height: 200px;
font-style: 30px;
}
</style>
<script src="./underscore.js"></script>
</head>
<body>
<!-- dom容器 -->
<div id="container"></div>
<script>
// 演示事件如何频繁发生
// 获取dom容器
let container = document.querySelector('#container');
// 绑定事件，触发事件频繁发生
let count = 1;
function doSomeThing(e) {
console.log(this); //window
console.log(e); //undefined
// 可能做回调或者是ajax请求
container.innerHTML = count++;
}
container.onmousemove = _.throttle(doSomeThing, 1000);
</script>
</body>
</html>
2. 自己封装debounce和throttle函数
防抖
<!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>
<style>
#container {
height: 200px;
background-color: rgb(41, 39, 39);
color: #fff;
text-align: center;
line-height: 200px;
font-style: 30px;
}
</style>
</head>
<body>
<!-- dom容器 -->
<div id="container"></div>
<script>
// 演示事件如何频繁发生
// 获取dom容器
let container = document.querySelector('#container');
// 绑定事件，触发事件频繁发生
let count = 1;
function doSomeThing(e) {
console.log(this); //window
console.log(e); //undefined
// 可能做回调或者是ajax请求
container.innerHTML = count++;
}
// 事件处理函数(doSomeThing)在一定时间(1000)后才执行
// 如果这段时间再次调用，则会重新计算时间，如果超过预定时间，则执行事件处理函数
container.onmousemove = debounce(doSomeThing, 1000);
// 自己封装防抖函数
function debounce(fun, wait) {
let timeout;
return function () {
// console.log(this); dom节点
// console.log(arguments); //mousemove{}
let argus = arguments;
let context = this;
clearTimeout(timeout)
timeout = setTimeout(function () {
fun.apply(context, argus);//doSomeThing
}, wait)
}
}
</script>
</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>Document</title>
<style>
#container {
height: 200px;
background-color: rgb(41, 39, 39);
color: #fff;
text-align: center;
line-height: 200px;
font-style: 30px;
}
</style>
</head>
<body>
<!-- dom容器 -->
<div id="container"></div>
<script>
// 演示事件如何频繁发生
// 获取dom容器
let container = document.querySelector('#container');
// 绑定事件，触发事件频繁发生
let count = 1;
function doSomeThing(e) {
console.log(this); //window
console.log(e); //undefined
// 可能做回调或者是ajax请求
container.innerHTML = count++;
}
container.onmousemove = throttle(doSomeThing, 1000);
// 节流原理：如果持续触发事件，每隔一段时间，执行一次事件
// 自己封装节流函数 --时间戳 超时调用
// 时间戳
function throttle(fun, wait) {
// 定义一个旧的时间戳
let old = 0;
let context, argus;
return function () {
// 获取一下当前的时间戳
let now = new Date().valueOf();
// console.log(now);
if (now - old > wait) {
// 立即执行
fun()
old = now;
}
}
}
</script>
</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>Document</title>
<style>
#container {
height: 200px;
background-color: rgb(41, 39, 39);
color: #fff;
text-align: center;
line-height: 200px;
font-style: 30px;
}
</style>
</head>
<body>
<!-- dom容器 -->
<div id="container"></div>
<script>
// 演示事件如何频繁发生
// 获取dom容器
let container = document.querySelector('#container');
// 绑定事件，触发事件频繁发生
let count = 1;
function doSomeThing(e) {
console.log(this); //window
console.log(e); //undefined
// 可能做回调或者是ajax请求
container.innerHTML = count++;
}
container.onmousemove = throttle(doSomeThing, 1000);
// 节流原理：如果持续触发事件，每隔一段时间，执行一次事件
// 自己封装节流函数 --时间戳 超时调用
// 超时调用
function throttle(fun, wait) {
let context, argus, timeout;
return function () {
context = this;
argus = arguments;
if (!timeout) {
timeout = setTimeout(() => {
fun.apply(context, argus);
timeout = null;
}, wait)
}
}
}
</script>
</body>
</html>
|