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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
js onclick事件传参讲解
Nov 06 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
Jun 24 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
详解Vue方法与事件
Mar 09 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
详解AngularJS 模块化
Jun 14 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
JS实现瀑布流效果
Mar 07 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
smarty的保留变量问题
2008/10/23 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
tensorflow更改变量的值实例
2018/07/30 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
py-charm延长试用期限实例
2019/12/22 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
一份全面的PHP面试问题考卷
2012/07/15 面试题
运输企业安全生产责任书
2014/07/28 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
庆七一宣传标语
2014/10/08 职场文书
锅炉工岗位职责
2015/02/13 职场文书
防溺水主题班会教案
2015/08/12 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript