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 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JavaScript中几种常见排序算法小结
Feb 22 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
详解vue高级特性
Jun 09 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 生成N个不重复的随机数
2015/01/21 PHP
php中使用sftp教程
2015/03/30 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
python制作小说爬虫实录
2017/08/14 Python
Python request使用方法及问题总结
2020/04/26 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
初中优秀班集体申报材料
2014/05/01 职场文书
学校评语大全
2014/05/06 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
临时租车协议范本
2014/09/23 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
学校施工安全责任书
2015/01/29 职场文书
2016新年问候语大全
2015/11/11 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
TensorFlow的自动求导原理分析
2021/05/26 Python
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
2021/06/29 Javascript
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL