Vue中函数防抖节流的理解及应用实现_vue3lodash

43 浏览量更新于2023-05-09 评论收藏 93KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue中函数防抖节流的理解及应用实现中函数防抖节流的理解及应用实现

主要介绍了Vue中函数防抖节流的理解及应用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着

小编来一起学习学习吧

防抖和节流的目的都是为了减少不必要的计算，不浪费资源，只在适合的时候再进行触发计算。

一、函数防抖一、函数防抖

定义定义

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

实现原理

函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。

使用场景使用场景

文本框输入搜索（连续输入时避免多次请求接口）

代码实现

/**

* 函数防抖

export function debounce(fn, delay) {

// 记录上一次的延时器

var timer = null;

var delay = delay || 200;

return function() {

var args = arguments;

var that = this;

// 清除上一次延时器

clearTimeout(timer)

timer = setTimeout(function() {

fn.apply(that,args)

}, delay);

}

二、函数节流二、函数节流

定义定义

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效；典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

实现原理实现原理

其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达规

定时间段，如果是，则执行，并更新上次执行的时间戳，

使用场景使用场景

resize、scroll、mousemove等事件触发监听

代码实现

/**

* 函数节流

export function throttle(fn,delay){

var lastTime;

var timer;

var delay = delay || 200;

return function() {

var args = arguments;

// 记录当前函数触发的时间

var nowTime = Date.now();

if (lastTime && nowTime - lastTime < delay) {

clearTimeout(timer);

timer = setTimeout(function () {

// 记录上一次函数触发的时间

lastTime = nowTime;

// 修正this指向问题

fn.apply(this, args);

}, delay);

}else{

lastTime = nowTime;

fn.apply(this, args);

}

三、在三、在Vue中使用函数防抖实现输入框搜索中使用函数防抖实现输入框搜索

效果图如下

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38553275

粉丝: 5
资源: 917

会员权益专享

Vue中函数防抖节流的理解及应用实现

评论0

会员权益专享

最新资源

Vue中函数防抖节流的理解及应用实现

评论0

Vue的click事件防抖和节流处理详解

在vue中使用防抖函数组件操作

浅析Vue 防抖与节流的使用

vue中实现防抖节流代码

在vue中使用防抖和节流应用场景

vue 自带的防抖节流

vue中防抖和节流应用

vue 实现防抖节流

vue3 引入防抖节流

vue2实现防抖节流

vue自定义指令防抖节流

vue搜索框防抖节流

vue中的防抖与节流插件

vue2防抖和节流封装函数

vue中使用防抖和节流

vue 请求接口防抖节流怎么实现

vue 外部函数与methods中函数区别_在vue中通过函数式解决防抖与节流！！！

vue2实现防抖和节流

vue3节流防抖实现

通过vue封装防抖和节流

会员权益专享

最新资源