Vue最新防抖方案(必看篇)

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。举个栗子，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。举个栗子，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

防抖实例：

<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
methods：{
fn() {
   delay(() => {
    //执行部分
   }, 500)
}
}
}
</script>

节流实例：

var throttle = function(func, delay) {
  var timer = null;
  return function() {
    var context = this;
    var args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}
function handle() {
  console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

以上这篇Vue最新防抖方案(必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于Vue中使用节流Lodash throttle详解

    在Vue中使用 Lodash.throttle 来做节流 在Vue中,有时需要对ajax请求提交进行节流操作.这时候,如果页面在请求成功之后会跳转,使用vue指令once或者加载一个loading遮罩禁止点击即可,但如果请求之后不跳转,并且loading不适用时,需要通过其他方式来实现节流,比如通过标识位判断等,这里我们着重说一下如何通过lodash.throttle来实现节流 lodash lodash是一个广受欢迎的js工具库,其中包含了各种各样的工具函数,方便开发时不需要反复造轮子,更关注

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

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

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

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • Vue的click事件防抖和节流处理详解

    函数防抖 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行. 在vue中对click添加防抖处理 const on = Vue.prototype.$on // 防抖处理 Vue.prototype.$on = function (event, func) { let timer let newFunc = func if (event === 'click') { newFunc = function () { clearTimeout(timer) timer = s

  • vue之debounce属性被移除及处理详解

    vue 2.0 debounce已经被移除 参考文档: https://cn.vuejs.org/v2/guide/migration.html#替换-debounce-过滤器 https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed 完整代码: <!DOCTYPE html> <html lang="en"> <head> <m

  • Vue最新防抖方案(必看篇)

    函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.举个栗子,持续触发scroll事件时,并不执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发scroll事件. 函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数.节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,

  • Intellij IDEA 2019 最新乱码问题及解决必杀技(必看篇)

    大家在使用 Intellij IDEA 的时候会经常遇到各种乱码问题,甚是烦扰. 栈长也偶尔会用下IDEA,也有一些解决乱码的经验,我给大家总结了以下几类乱码的场景,绝壁能帮你解决 IDEA 各种乱码问题. 常见乱码场景及解决方案 1.项目源代码中文乱码 Settings > Editor > File Encodings > Global Encodings & Project Encodings 设置为:UTF-8. 上面红色区域都统一设置一下. 2.Main方法运行,控制台

  • vue2.X组件学习心得(新手必看篇)

    vue2.X组件学习心得(新手必看篇)

    VUEJS学习网址:https://cn.vuejs.org/ 此文章是用来记录自己的学习和实践心得. 关注点:父子组件之间的通信 看图说话: Pass Props 子组件本身与父组件是孤立的,通过子组件中显示声明的props属性,接收父组件数据; 父组件的数据更新时,子组件的prop会跟着更新: 此数据流动是单向的(看着); Emit Events 子组件使用$.emit(fn)向外抛出自己的内部触发的事件; 父组件是否监听?如果父组件需要监听,使用v-on绑定监听,触发对应事件; 以上为通用

  • Android EventBus 3.0.0 使用总结(必看篇)

    Android EventBus 3.0.0 使用总结(必看篇)

    前言 EventBus框架 EventBus是一个通用的叫法,例如Google出品的Guava,Guava是一个庞大的库,EventBus只是它附带的一个小功能,因此实际项目中使用并不多.用的最多的是greenrobot/EventBus,这个库的优点是接口简洁,集成方便,但是限定了方法名,不支持注解.另一个库square/otto修改自 Guava ,用的人也不少.所以今天我们研究的目标是greenrobot的EventBus. EventBus 简介 1.EventBus3.0.0 是最新的

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • 老生常谈mysql event事件调度器(必看篇)

    老生常谈mysql event事件调度器(必看篇)

    概述 MySQL也有自己的事件调度器,简单地可以理解为linux的crontab job,不过对于SQL应用来说,它的功能更齐全,也更易于维护.个人感觉如果数量创建太多的话,也可能影响DB性能,且不易调试. MySQL事件调度器的主要内容 总开关 参数event_scheduler为事件调度器的总开关,一般来说设置为ON或者OFF就好,不建议设置成disabled,如果设置为ON,show processlist可看到该线程 创建,修改,查看等语法 关于如何创建,修改event这里不做叙述,创建

  • java中进程与线程_三种实现方式总结(必看篇)

    java中进程与线程_三种实现方式总结(必看篇)

    一:进程与线程 概述:几乎任何的操作系统都支持运行多个任务,通常一个任务就是一个程序,而一个程序就是一个进程.当一个进程运行时,内部可能包括多个顺序执行流,每个顺序执行流就是一个线程. 进程:进程是指处于运行过程中的程序,并且具有一定的独立功能.进程是系统进行资源分配和调度的一个单位.当程序进入内存运行时,即为进程. 进程的三个特点: 1:独立性:进程是系统中独立存在的实体,它可以独立拥有资源,每一个进程都有自己独立的地址空间,没有进程本身的运行,用户进程不可以直接访问其他进程的地址空间. 2:

  • thrift安装遇到的问题以及解决方法(必看篇)

    1. 必须安装boost.最新的稳定版是1.48.0. 1.1.先下载:http://sourceforge.NET/projects/boost/files/boost/1.48.0/          选择tar.gz包,     下载后我解压到了/usr/local/boost_1_48下:tar zxvf boost1.48.0 -C /usr/local/boost_1_48 1.2.安装过程和以前的老版本有些不同,看自带软件包里的index.html就可以了: 主要内容涉及到安装的就

  • 关于正则表达式基本语法的应用详解(必看篇)

    1.正则表达式基本语法 两个特殊的符号'^'和'$'.他们的作用是分别指出一个字符串的开始和结束.例子如下: "^The":表示所有以"The"开始的字符串("There","The cat"等): "of despair$":表示所以以"of despair"结尾的字符串: "^abc$":表示开始和结尾都是"abc"的字符串--呵呵,只有&qu

  • 老生常谈Java字符串进阶(必看篇)

    前言 最常用的对字符串操作的类有三个,分别是String,StringBuilder,StringBuffer,下面将会详细的说说这三个类...... String String类代表字符串,这个是最基本的对字符串的类,这个也是使用比较多的类,这里就不再详细介绍了 构造 new String(String str) new String(StringBuilder str) new String(StringBuffer str) new String(byte[] bys,String cha

随机推荐