vue节流和防抖

2023-11-18

节流

节流是间隔执行,在定时器到时间后再清空定时器,函数将每个 n 秒执行一次;

在内部定义一个定时器和一个开关变量 ,初始化变量为true ,

执行定期器前判断变量是否false 就return ;

为true 如果是继续执行 ,并且把变量赋值为false;

在定时器内部调用函数后 ,把变量设为true。

1)方法一

/**

节流原理:在一定时间内,只能触发一次

@param {Function} func 要执行的回调函数
@param {Number} wait 延时的时间
@param {Boolean} immediate 是否立即执行
@return null
*/

let timer, flag;

function throttle(func, wait = 500, immediate = true) {

if (immediate) {

if (!flag) {

flag = true;

// 如果是立即执行,则在wait毫秒内开始时执行

typeof func === 'function' && func();

timer = setTimeout(() => {

flag = false;

}, wait);

}

} else {

if (!flag) {

flag = true

// 如果是非立即执行,则在wait毫秒内的结束处执行

timer = setTimeout(() => {

flag = false

typeof func === 'function' && func();

}, wait);

}

}

};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue节流和防抖 的相关文章

  • 关于红楼梦Python文本分析

    1 获取小说文本 读取文件 获取小说文本 读取文件 fn open prepare 红楼梦 曹雪芹 txt encoding utf 8 string data fn read 读出整个文件 fn close 关闭文件 2 对文本进行处理
  • oralce的判断语句

    大家对 IF ELSE 语句应该都很熟悉吧 它是用来对过程进行控制的 在 SQL 的世界中 CASE 语句有类似的效果 下面简单的介绍 CASE 语句的用法 CASE 语句的形式 事实上 CASE 语句有两种形式 1 SELECT 2 简单
  • 10. 微积分 - 微分&链式法则

    文章目录 微分 链式法则 Hi 大家好 我是茶桁 我们上节课讲了导数 并且在最后预告了今天的内容 今天将会是两部分 一部分是 微分 一部分是 链式法则 微分 微分 我们在导论里面提过 它和导数比较像 但是还是有差别的 实际的定义和内容都比较
  • 来吧!一文彻底搞定Vue组件!

    作者 Jeskson 来源 达达前端小酒馆 Vue组件的概述 组件是什么呢 了解组件对象的分析 Vue组件中的data属性 props传递数据的原理到底是什么 事件通信的那些事 如何了解父子组件事件通信 和遇到非父子组件事件通信如何处理 组

随机推荐

  • IP地址与用户行为

    IP地址能够解决网络风险和提高网络安全的原因是 所有的网络请求都会带有IP信息 是访问者的独立标识 另外ip地址的分配和管理比较严格 难以造假 另外ip属于网络层 可以轻松的对其进行阻断 现有的各种网络安全 负载均衡的设备和软件 都是以ip
  • 校园网上报修系统/宿舍报修系统的设计与实现

    摘要 随着科学技术的飞速发展 社会的方方面面 各行各业都在努力与现代的先进技术接轨 通过科技手段来提高自身的优势 校园网上报修系统当然也不能排除在外 从报修信息的统计和分析 在过程中会产生大量的 各种各样的数据 本文以校园网上报修系统为目标
  • 直流电路中升降压(Buck-Boost)变换电路的设计、参数选取及Matlab/Simulik仿真

    创作不易 感谢大家点赞关注支持 感兴趣的可以点击收藏 这一篇文章给大家介绍一种升降压 Buck Boost 直流变换电路 喜欢的可以点击收藏 升降压 Buck Boost 直流变换电路是通过调节开关管占空比的大小 占空比越小 输出电压越小
  • QT 之键盘事件(捕获键盘按下、松开事件)

    我们在做软件时候 经常会碰到这样的场景 比如按下F5进行刷新功能 按下F1进行帮助之类的快捷键方式 那么在QT中该怎样做呢 查阅文档 QT已经实现了这一系列的键盘事件 void QWidget keyPressEvent QKeyEvent
  • 拷贝构造和拷贝赋值

    拷贝构造表示有新的对象被定义 Object obj1 obj2 新的Object对象obj1被定义 此时调用拷贝构造函数 copy construction 拷贝赋值表示没有新的对象被定义 obj1 obj2 obj1是一个已经被声明过的对
  • WebSocket学习

    一 简介 WebSocket 是一种网络通信协议 RFC6455 定义了它的通信标准 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 HTTP 协议是一种无状态的 无连接的 单向的应用层协议 它
  • Pythonの类

    Python是一种面向对象编程语言 因此类在Python中是很重要的概念 类是一种定义数据和行为的模板 可以创建对象并针对特定的问题对其进行操作 在Python中 类的定义以关键字 class 开头 后跟类的名称 类可以包含方法和属性 方法
  • mpvue实现微信小程序样式切换以及本地缓存

    功能描述 在页面A的添加应用中点击 添加 跳转到展示所有应用的页面B 通过点击开关 在页面A中展示所开启的应用 效果展示 代码 页面B代码 div class itembox div class boxhead img div class
  • [HDU 5079][2014 Asia AnShan Regional Contest]Square(DP套DP)

    题目链接 http acm hdu edu cn showproblem php pid 5079 题目大意 给你一个 n n n 8 n middot n n le 8 的棋盘 上面有一些格子必须是黑色 其它可以染黑或者染白 对于一个棋盘
  • python实现逻辑回归三种方法_纯Python实现逻辑回归

    前几天使用后sklearn实现了逻辑回归 这里用纯python实现逻辑回归 首先 我们定义一个sigmoid函数 def sigmoid inX sigmoid函数 return 1 0 1 exp inX 这里使用梯度上升进行逻辑回归 梯
  • 【编译之美】【5. 代码优化:数据流分析】

    有些优化只能在全局优化中做 在本地优化中做不了 比如 代码移动 Code motion 能够将代码从一个基本块挪到另一个基本块 比如从循环内部挪到循环外部 来减少不必要的计算 循环剥离 部分冗余删除 Partial Redundancy E
  • 角落的开发工具集之Vs(Visual Studio)2017插件推荐

    工具善其事 必先利其器 装好这些插件让vs更上一层楼 因为最近录制视频的缘故 很多朋友都在QQ群留言 或者微信公众号私信我 问我一些工具和一些插件啊 怎么使用的啊 那么今天我忙里偷闲整理一下清单 然后在这里面公布出来 Visual Stud
  • 毕业设计-基于深度学习的花卉识别分类

    目录 前言 课题背景和意义 实现技术思路 一 花卉识别相关理论基础 二 基于 ResNeXt 和迁移学习的花卉种类识别 三 基于 EfficientNet 和迁移学习的花卉种类识别 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光
  • scss 中公共变量的导出方法:export

    前言 在使用vue或者react开发项目时都会用到scss 或者less等的扩展语言 那么肯定会有公共变量提取与使用 这篇文章就是记录如何导出公共css变量的 export 关键词 menuText bfcbd9 menuActiveTex
  • React 相关方法(API)介绍-元素与组件操作

    JSX可以减少定义组件的复杂性 但对于React来说JSX并不是必须的 JSX标签最终会被转换为原生的JavaScript 除使用JSX语法外 还可以使用React提供的API来创建组件 本文将介绍使用React创建元素 及一些React中
  • 类与对象基础

    1 面向对象概述 面向过程就是分析出解决问题所需要的步骤 然后用函数把这些步骤一一实现 使用的时候依次调用就可以了 面向对象则是把构成问题的事务按照一定规则划分为多个独立的对象 然后通过调用对象的方法来解决问题 当然 一个应用程序会包含多个
  • JAVA构造方法与static 关键字

    JAVA的构造方法 什么是构造方法 构造方法用来生成一个实例化的对象并对对象实例中的成员变量进行初始化 采用new创建对象时 构造方法被执行 构造方法的方法名必须和类名保持一致 注意 构造方法没有返回值 不可以加void 只能用 publi
  • 设计模式之命令模式

    优质资源分享 学习路线指引 点击解锁 知识定位 人群定位 Python实战微信订餐小程序 进阶级 本课程是python flask 微信小程序的完美结合 从项目搭建到腾讯云部署上线 打造一个全栈订餐系统 Python量化交易实战 入门级 手
  • 【2021应用上架】超详细开发者账号申请&应用上架审核经验整理

    一 准备阶段需要注意的 1 上架前开发者账号申请 申请的主体确定 在公司有多个主体的情况下 用哪个公司主体认证开发者 上架APP时需要考虑到应用相关的各种材料申请在哪个公司名下 材料所属公司主体与开发者账号主体不一致的情况需要开发者花费时间
  • vue节流和防抖

    节流 节流是间隔执行 在定时器到时间后再清空定时器 函数将每个 n 秒执行一次 在内部定义一个定时器和一个开关变量 初始化变量为true 执行定期器前判断变量是否false 就return 为true 如果是继续执行 并且把变量赋值为fal