什么是防抖和节流？vue 中如何使用防抖和节流
介绍
在 JavaScript 中，防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件，比如监听滚动、点赞功能，总不能点一次赞就向后台发送一次数据，这时候就要用到防抖和节流。
防抖和节流的核心就是定时器，我们要知道定时器的一个概念，就是在定时之后，在没触发之前清除定时器，这个定时器方法不会被触发。
防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只会被执行一次（最后一次），如果 N 秒内再次被触发，则重新计算延迟时间。
节流函数的作用是规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。
VUE 中用法
既然防抖和节流是我们在开发过程中常用优化性能的方式，那么在 vue 中怎么使用呢：
1、在公共方法中（如 public.js 中），加入函数防抖和节流方法
// 防抖
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 = null;
fn.apply(th, args);
}, delay);
};
}
// 节流
export function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}2、在需要使用的组件引用
import { _debounce } from "@/utils/public"3、在 methods 中使用
methods: {
// 改变场数
changefield: _debounce(function(_type, index, item) {
// do something ...
}, 200)
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录