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中使用函数防抖实现输入框搜索

效果图如下

新建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 函数防抖节流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现手机号码的校验实例代码(防抖函数的应用场景)

    前言 上一篇博文我们讲到了节流函数的应用场景,我们知道了节流函数可以用在模糊查询.scroller.onresize等场景:今天这篇我们来讲防抖函数的应用场景:: 通过上一篇博文的学习,我们知道了防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次: 如果对防抖函数原理有疑惑,请点击链接跳转到关于防抖函数讲解的博文:https://www.jb51.net/article/169350.htm 防抖函数一般是用于频繁触发

  • 浅谈VUE防抖与节流的最佳解决方案(函数式组件)

    前言 有echarts使用经验的同学可能遇到过这样的场景,在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的,resize事件是连续触发的这意味着echarts实例会连续的重绘这是非常耗性能的.还有一个常见的场景在input标签的input事件里请求后端接口,input事件也是连续触发的,假设我输入了"12"就会请求两次接口参数分别是"1"和"12",比浪费网络资源更要命的是如果参数为&quo

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

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

  • 在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

    废话不多说,直接上代码吧! /** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = argum

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

    初级 1.先写好防抖函数 /** * @desc 防抖函数 * @param {需要防抖的函数} func * @param {延迟时间} wait * @param {是否立即执行} immediate */ export function debounce(func, wait, immediate) { let timeout return function(...args) { let context = this if (timeout) clearTimeout(timeout) i

  • Vue中keep-alive组件的深入理解

    前言 最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了. 正文 我们都知道,vue组件进行路由跳转时,会销毁当前组件.所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数.这就导致了上述问题,A路由传到B路由的参数没了. 当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-ali

  • vue中对虚拟dom的理解知识点总结

    本质是一个普通的js对象,用于描述视图界面结构的, 在mouted的回调中,可以输出_vnode, 通过图可以知道,_vnode中有以下几个主要的属性: tag:组件的标签名, data: 组件的属性, children: 组件的子标签 parent: 父级元素 render函数: 作用:创建虚拟dom, 每个组件都有虚拟dom,并且虚拟dom都是由render函数创建的: 使用虚拟dom树的目的:提高渲染效率 在vue中,当渲染视图时候会调用render函数.这种渲染不仅发生在组件创建时候,还

  • 在Vue中使用防抖与节流,及this指向的问题

    目录 使用防抖与节流,及this指向问题 一顿操作后 使用防抖函数所遇见的坑 正常写法 使用 Vue中写法使用 Vue中的watch的防抖简写 使用防抖与节流,及this指向问题 最近项目中遇到了防抖与节流问题,搜索了很多文章都有this指向的问题,最后不得不采取一种很low的方法 data中定义isFirst为1 if (this.isFirst < 2){     this.isFirst = 2     setTimeout(() => {         this.isFirst =

  • Vue中使用防抖与节流的方法

    目录 何为防抖/节流 防抖(debounce) 节流(throttle) 页面使用 使用场景 总结 何为防抖/节流 首先先说说何为防抖与节流 防抖(debounce) 防抖就是一段时间内会多次触发相同的事件,而我们的目的却只是想让他们在不触发的多久以后再执行该事件,例如鼠标移动事件(mousemove).输入框变更事件(change)等等,这个时候我们就需要一个方法去控制他,一段时间内没执行该事件后,执行该事件,即为防抖 节流(throttle) 节流就是短时间内会多次触发相同的事件,而我们的目

  • Vue中的Object.defineProperty全面理解

    目录 Object.defineProperty理解 一.直接添加 二.使用getter.setter 需要Object.defineProperty()注意点 Object.defineProperty理解 定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象. 一.直接添加 let person = {     name:'张三',     sex:'男', } Object.defineProperty(per

  • JavaScript原型链中函数和对象的理解

    目录 __ proto__ prototype.__ proto__ 理解 __ proto__ 最近在看高程4,原型链肯定是绕不过的,本瓜之前一直认为,只要记住这句话就可以了: 一个对象的隐式原型(__proto__)等于构造这个对象的构造函数的显式原型(prototype) 确实,所有对象都符合这句真理,在控制台打印一试便知: const str = new String("123") str.__proto__ === String.prototype // true const

  • js节流防抖应用场景,以及在vue中节流防抖的具体实现操作

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(debounce),在网上想找个现成的用下,但是好多都不对,于是就自己搞了. 先看看概念 函数防抖(debounce): 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 函数节流(throttle)

随机推荐