防抖(debounce)

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

节流(throttle)

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

就相当于,一个水龙头在滴水,可能一次性会滴很多滴,但是我们只希望它每隔 500ms 滴一滴水,保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。

vue 封装utils.js

const debounce = (func, time, isDebounce, ctx) => {
var timer, lastCall, rtn;
//防抖函数
if (isDebounce) {
rtn = (...params) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
func.apply(ctx, params);
}, time);
};
} else {//节流函数
rtn = (...params) => {
const now = new Date().getTime();
if (now - lastCall < time && lastCall) return;
lastCall = now;
func.apply(ctx, params);
};
}
return rtn;
}; export default {
name: 'Debounce',
abstract: true,
props: {
time: {
type: Number,
default: 800,
},
events: {
type: String,
default: 'click',
},
isDebounce: {
type: Boolean,
default: false,
},
},
created() {
this.eventKeys = this.events.split(',');
this.originMap = {};
this.debouncedMap = {};
},
render() {
const vnode = this.$slots.default[0];
this.eventKeys.forEach(key => {
const target = vnode.data.on[key];
if (target === this.originMap[key] && this.debouncedMap[key]) {
vnode.data.on[key] = this.debouncedMap[key];
} else if (target) {
this.originMap[key] = target;
this.debouncedMap[key] = debounce(
target,
this.time,
this.isDebounce,
vnode
);
vnode.data.on[key] = this.debouncedMap[key];
}
});
return vnode;
},
};

然后我们在main.js入口文件里面全局注册一下

import Debounce from '@/config/debounce'

Vue.component('Debounce',Debounce)

使用方法

<!--当是isDebounce时表示是防抖函数,!isDebounce是节流函数,time是执行时间间隔-->
<Debounce :time='1000' isDebounce>
<button @click='btn'>btn</button>
</Debounce>

转载:https://juejin.im/post/5db114c3e51d452a1c03e25b

vue 防抖节流函数——组件封装的更多相关文章

  1. vue防抖节流函数---组件封装,防止按钮多次点击

    1.vue 封装utils.js /** * @param {function} func 执行函数 * @param {number} time 防抖节流时间 * @param {boolean} ...

  2. vue防抖节流之v-debounce--throttle使用指南

    最新封装了一个vue防抖节流自定义指令,发布到npm上,有用欢迎star,谢谢! npm地址:https://www.npmjs.com/package/v-debounce-throttle git ...

  3. v-debounce-throttle是一个vue防抖节流指令

    v-debounce-throttle是一个vue防抖节流指令 简介 v-debounce-throttle是一个vue防抖节流指令,控制单一事件的触发频率.其核心是拦截组件元素的v-on绑定事件,采 ...

  4. JavaScript防抖节流函数

    1.直接上码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  5. JS基石之-----防抖节流函数

    防抖和节流函数   阅读目录 一 .防抖函数 二 .节流函数 三 .个人理解两者的区别   一.防抖函数 1.1 概念: 触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算 ...

  6. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  7. js 防抖 节流 JavaScript

    实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮:如resize事件,对某些自适应页面调整DOM的渲染:如keyup事件,监听文字输入并调用接口进行模糊匹配等 ...

  8. 【跟着大佬学JavaScript】之lodash防抖节流合并

    前言 前面已经对防抖和节流有了介绍,这篇主要看lodash是如何将防抖和节流合并成一个函数的. 初衷是深入lodash,学习它内部的好代码并应用,同时也加深节流防抖的理解.这里会先从防抖开始一步步往后 ...

  9. 函数防抖节流的理解及在Vue中的应用

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...

随机推荐

  1. VS TODO注释快捷键

    快速按出任务列表 todo 注释 Ctrl 键+ \| 键+ T键

  2. macOS BLAS LAPACK

    /System/Library/Frameworks/Accelerate.framework/Frameworks/vecLib.framework/Headers

  3. $nextTick

    Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextT ...

  4. jmeter接口测试与接口测试工具

    接口测试与接口测试工具 1,什么是接口? 接口,Application Programming Interface(API) 通俗的讲 就是HTTP请求 2,什么是接口测试? 接口测试测试组件间接口的 ...

  5. 命令——tr

    文本处理工具命令——tr 一帮助说明 TR() User Commands TR() NAME tr - translate or delete characters SYNOPSIS tr [OPT ...

  6. Strassen __128int

    题目链接 题意思路很简单,递归求最小就好了.但__128int没见过.故写博客记下.__128int如果输入输出就要自己写函数. #include<bits/stdc++.h> using ...

  7. macOS 10.14 Mojave Apache Setup: Multiple PHP Versions

    Part 1: macOS 10.14 Mojave Web Development Environment Developing web applications on macOS is a rea ...

  8. drawArc

    1) 画笔设置 Paint.Style.STROKE 中空模式 paint = new Paint(); //新建一个画笔对象 paint.setAntiAlias(true);//抗锯齿功能 pai ...

  9. Linux shell 归纳之 cp

    1. 复制文件夹folder1(包括所有子文件夹和文件), 并命名为folder2 # cp -r /usr/folder1 folder2 2. 复制文件file1 到它的上一级的目录的abc文件夹 ...

  10. ANTLR4将BF翻译成CPP

    实验环境: 操作系统:windows 10 JAVA:JDK 1.8 antlr:antlr-4.7.1-complete.jar IDE:IntelliJ IDEA 2017.2.7 实验目的: 实 ...