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


Posted in Javascript onApril 24, 2020

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

一、函数防抖

定义
在事件被触发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中使用函数防抖实现输入框搜索

效果图如下

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

新建common.js文件

/**
 * 函数防抖
 */
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);
 }
}

在vue组件中引入

import {debounce} from '@/utils/common.js'

在组件中使用

<div class="white-search-bar">
    <div class="search-bar-item">
     <span class="iconfont icon-search"></span>
     <input class="search-bar-input" :class="{'search-bar-focus':isSearchFocus}" type="text" maxlength="8" placeholder="应用搜索" v-model="keyword" @keyup="appSearch" @focus="onSearchFocus" @blur="onSearchBlur">
    </div>
    <span class="search-bar-btn" @click="appSearchCancel" v-if="isSearchFocus">取消</span>
   </div>

methods:{
appSearch:debounce(function(){
  		 this.getAppList()
  	 },300)
}

参考阅读

https://www.jqhtml.com/20268.html

到此这篇关于Vue中函数防抖节流的理解及应用实现的文章就介绍到这了,更多相关Vue 函数防抖节流内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JS Ajax请求如何防止重复提交
Jun 13 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 #Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 #Javascript
小程序开发之模态框组件封装
Apr 23 #Javascript
详解Vue3中对VDOM的改进
Apr 23 #Javascript
微信小程序实现滑动操作代码
Apr 23 #Javascript
You might like
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
实现动画效果核心方式的js代码
2013/09/27 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
用pycharm开发django项目示例代码
2018/10/24 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python3实现单目标粒子群算法
2019/11/14 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
自荐信结尾
2013/10/27 职场文书
2014年清明节寄语
2014/04/03 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
学校政风行风整改方案
2014/10/25 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书