页面函数防抖和节流的区别
直接上代码，注释防抖和节流之间的区别和差异
<!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>
<div id="content"
style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;">
</div>
<script>
let num = 1;
const content = document.getElementById('content');
function count() {
content.innerHTML = num++;
};
// content.onmousemove = count;
// 防抖，所谓防抖就是触发事件n秒后才执行函数，如果在n秒内又触发了事件，则会重新计算函数执行时间
// 防抖函数分为非立即执行版和立即执行版
// 非立即执行
function debounce(func, wait) {
let timeout;
return function () {
//this和参数传递 获取this 目的是为了让debounce函数最终返回的函数This指向不变
const context = this
//获取参数args 目的是依旧能接收到e参数
const args = [...arguments] //MouseEvent事件
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(context, args)
}, wait)
}
}
// content.onmousemove = debounce(count, 1000)
// 立即执行 触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数
function debounce(func, wait) {
let timeout
return function () {
const context = this
const args = [...arguments]
if (timeout) clearTimeout(timeout)
const callNow = !timeout
timeout = setTimeout(() => {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
}
}
// 防抖函数 立即执行和非立即执行双剑合璧
/**
* @desc 函数防抖
* @param func 函数
* @param wait 延迟执行毫秒数
* @param immediate true 表立即执行，false 表非立即执行
*/
function debounce(func, wait, immediate) {
let timeout;
return function () {
const context = this;
const args = [...arguments];
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
}
// 节流 所谓节流，就是指连续触发事件但是在n秒中只执行一次函数。节流会稀释函数执行频率
// 在持续触发事件的过程中，函数不会立即执行，并且每1s执行一次，在停止触发事件后，函数还会在执行一次
// 时间戳版 在时间段内开始的时候
function throttle(func, wait) {
var previous = 0
return function () {
let now = Date.now()
let context = this
let args = [...arguments]
if (now - previous > wait) {
func.apply(context, args)
previous = now
}
}
}
content.onmousemove = throttle(count, 1000)
// 定时器版本 时间段内结束的时候
function throttle(func, wait) {
let timeout
return function () {
let context = this
let args = [...arguments]
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
func.apply(context, args)
}, wait)
}
}
}
// 节流双剑合璧
/**
* @desc 函数节流
* @param func 函数
* @param wait 延迟执行毫秒数
* @param type 1 表时间戳版，2 表定时器版
*/
function throttle(func, wait, type) {
if (type === 1) {
let previous = 0;
} else if (type === 2) {
let timeout;
}
return function () {
let context = this;
let args = arguments;
if (type === 1) {
let now = Date.now();
if (now - previous > wait) {
func.apply(context, args);
previous = now;
}
} else if (type === 2) {
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
}
</script>
</body>
</html>