Javascript的防抖和节流、VUE的防抖和节流
js原生
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
函数防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下面这段代码，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
一个防抖的例子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
body{
height: 5000px;
}
style>
head>
<body>
<script>
//防抖函数、fn（处理函数），wait（自定义定时器时间）
function debounce(fn, wait) {
var timeout = ""; //声明变量timeout复制为空字符串
return function() {//返回匿名函数
if(timeout !== ""){//如果timeout不为空
clearTimeout(timeout);//清除timeout定时器
}
timeout = setTimeout(fn, wait);//重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));//为window的scroll滑动事件绑定防抖函数
script>
body>
html>
代码执行路线是：
1、页面初始化，渲染页面，执行代码
2、调用debounce函数，声明一个变量timeout，并赋值为空字符串。返回一个匿名函数，通过addEventListener绑定给window的scroll（滑动事件）
3、触发window的scroll（滑动事件）
4、进入window的scroll的处理函数（调用debounce函数返回的那个匿名函数）。
5.1、如果timeout不为空，清除timeout定时器，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
5.2、如果timeout为空，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
6、再次触发window的scroll（滑动事件），重复步骤4和步骤5
7、停止触发，执行一遍步骤4和步骤5
8、执行timeout一次性定时器，调用handle函数进行处理
函数节流------》时间戳
var throttle = function(func, delay) {
var prev = Date.now(); //生成初始时间
return function() {
var context = this; //存储当前this指向---可删除
var args = arguments; //存储当前局部变量---可删除
var now = Date.now(); //存储当前执行时间
if (now - prev >= delay) { //使用当前执行时间减去初始时间
func.apply(context, args); //通过apply使用当前对象调用func函数------如果想删除var context = this;var args = arguments;需要把当前代码改成func()
prev = Date.now(); //再次刷新初始时间
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
时间戳的一个优点：在页面初始化的时候就生成了“初始时间”（不明白初始时间上面有提示），而此时还没有触发scroll时间，等触发时远远超过了时间间隔（假设时间间隔为1秒），所以处理函数会立即执行
时间戳的一个缺点：假设触发事件的间隔是一秒，在距离上一次触发事件的时间还差0.5秒停止触发事件，那一秒过后事件函数也不会执行；
函数节流------》定时器
var throttle = function(func, delay) {
var timer = "";
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = "";
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
定时器的优缺点与时间戳相反，当时发事件后1秒钟，执行处理函数，在事件间隔内出发时间，等超过时间间隔会再次执行处理函数
函数节流------》定时器+时间戳
所以我们就把事件戳的有点和定时器的有点结合起来，变成下面的方案
var throttle = function(func, delay) {
var timer = "";
var startTime = Date.now();
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) {
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
------VUE------
// 防抖
export function _debounce(fn, delay) {
var delay = delay || 200;
var timer = "";
return function () {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
timer ="" ;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last = new Date().getTime();
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = new Date().getTime();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = new Date().getTime();
fn.apply(th, args);
}, interval);
} else {
last = new Date().getTime();
fn.apply(th, args);
}
}
}
在需要使用的组件引用
import { _debounce } from "@/utils/public";
在 methods 中使用
methods: {
// 改变场数
changefield: _debounce(function(_type, index, item) {
// do something ...
}, 200)
}
VUE防抖节流：https://blog.csdn.net/qq_39759115/article/details/82287517
JS防抖节流参考文章：https://blog.csdn.net/qq_41000891/article/details/82733532
希望能看懂。。。。。。嘿嘿