防抖和节流
防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
非立即执行防抖
<!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>Document</title>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
padding: 100px;
text-align: center
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
var div = document.querySelector('#app')
var num = 0
div.innerHTML = num
function debounce(fn, wait) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
timeout = setTimeout(()=>{handle()}, wait);
}
}
// 处理函数
function handle() {
num++
div.innerHTML = num
}
// 滚动事件
div.addEventListener('mousemove', debounce(handle, 1000));
</script>
</body>
</html>
立即执行防抖
<script>
var div = document.querySelector('#app')
var num = 0
div.innerHTML = num
function debounce(fn, wait) {
var timeout = null;
return function () {
if (timeout !== null) clearTimeout(timeout);
let flag = !timeout
timeout = setTimeout(()=>{timeout=null}, wait);
if(flag) {
handle()
}
}
}
// 处理函数
function handle() {
num++
div.innerHTML = num
}
// 滚动事件
div.addEventListener('mousemove', debounce(handle, 1000));
</script>
节流(throttle)
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
定时器节流
<!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>Document</title>
<style>
div {
width: 300px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
padding: 100px;
text-align: center
}
</style>
</head>
<body>
<div id="app">
</div>
<script>
var div = document.querySelector('#app')
var num = 0
div.innerHTML = num
function throttle(fn, wait) {
var timer = null
return function () {
if(!timer) {
timer = setTimeout(()=>{
timer = null
fn()
},wait)
}
}
}
// 处理函数
function handle() {
num++
div.innerHTML = num
}
// 移动事件
div.addEventListener('mousemove', throttle(handle, 1000));
</script>
</body>
</html>
时间戳节流
<script>
var div = document.querySelector('#app')
var num = 0
div.innerHTML = num
function throttle(fn, wait) {
var time = 0;
return function () {
var now = new Date()
if(now - time > wait) {
fn()
time = new Date()
}
}
}
// 处理函数
function handle() {
num++
div.innerHTML = num
}
// 移动事件
div.addEventListener('mousemove', throttle(handle, 1000));
</script>