js原生
函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。
函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。
函数防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下面这段代码，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。
一个防抖的例子
代码执行路线是：
- 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秒停止触发事件，那一秒过后事件函数也不会执行；
函数节流------》定时器
函数节流------》定时器+时间戳
----------------------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