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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
jquery offset函数应用实例
Nov 14 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
Apr 14 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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设计模式 Strategy(策略模式)
2011/06/26 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
让textarea自动调整大小的js代码
2011/04/12 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python中eval与int的区别浅析
2019/08/11 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python实现感知机模型的示例
2020/09/30 Python
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
销售自荐信
2013/10/22 职场文书
在Python中如何使用yield
2021/06/07 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
基于Python实现nc批量转tif格式
2022/08/14 Python