公司网站在百度链接到垃圾网站/百度网站的网址是什么
一、防抖和节流的适用场景
- 防抖(Debounce): 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。
- 节流(Throttle): 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。
二、防抖
解释:在设置的时间间隔内连续点击多次,只执行最后一次(时间间隔大于设置的时间)的点击。
例如:某个支付按钮,不加防抖函数,如果用户在一瞬间连续点击很多次,就可能会出现生成多个订单的情况。搜索框用户输入文字调用搜索接口等等等....
函数如下:设置连续两次点击的时间间隔为1秒。
data(){
return {clearId:null}
}methods:{debounce() {// 两次点击的时间间隔小于1秒则清除定时器重新计时,否则就执行函数内部逻辑clearInterval(this.clearId)this.clearId = setTimeout(() => {// 发送请求 / 执行逻辑this.doAjax()}, 1000)}
}
三、节流
解释:控制函数的执行频率,使得函数在短时间内多次触发时,只执行一次或者以指定的频率执行。它可以有效地减少函数的执行次数,特别是在处理一些高频率触发的事件(比如浏览器的滚动事件、resize事件、input输入事件等)时非常有用,可以优化性能和用户体验,只允许在规定的时间内执行一次。
例如:浏览器的滚动事件、resize事件、input输入事件等高频率触发的事件,节流函数可以确保函数在一定时间间隔内最多执行一次,即使它在短时间内被频繁调用。
data () {return {timer: 0}
},
methods:{throttle() {// 创建一个时间戳赋值给timer 下次的时间戳减去上次的时间戳 间隔大于1s 才会去固定触发这个函数,只要小于1s永远不会触发const curClickTime = Date.now()if (curClickTime - this.timer > 1000) {this.doAjax() //大于1s调用函数this.timer = curClickTime } else {console.log('时间间隔小于一秒', curClickTime )} }
}
四、防抖和节流的区别
共同点: 都可以用来控制某个函数在短时间内被频繁调用时的执行次数,从而优化性能和避免不必要的计算或请求。
不同点 :思路不同
1. 防抖:某个时间内不能再次触发,一旦触发,就要重新计算
2. 节流:限制相邻两次调用的时间间隔
总结:
防抖和节流都是为了优化性能而设计的方法,但在具体应用时需要根据不同的场景选择合适的方式。防抖更多用于避免短时间内频繁触发,节流则更多用于限制一定时间内的触发次数。
相关文章:

JS防抖和节流
一、防抖和节流的适用场景 防抖(Debounce): 适合在输入框输入时的实时搜索、窗口大小调整时的resize事件等。节流(Throttle): 适合如页面滚动时的scroll事件、按钮点击时的请求发送等需要控制频率的场景。 …...

OpenWrt 为软件包和docker空间扩容
参考资料 【openwrt折腾日记】解决openwrt固件刷入后磁盘空间默认小的问题,关联openwrt磁盘扩容空间扩容【openwrt分区扩容】轻松解决空间可用不足的尴尬丨老李一瓶奶油的YouTube 划分空间 参考一瓶奶油的YouTube 系统 -> 磁盘管理 -> 磁盘 -> 修改 格…...

重要的工作任务,怎么在电脑桌面设置倒计时?
在日常工作中,我们总是面临着众多工作任务,如何高效地管理和完成这些任务成为了每个职场人的必备技能。为任务设置倒计时,不仅能让我们清晰地看到任务的先后顺序,还能帮助我们更好地把握时间,提高工作效率。想象一下&a…...

Failed to build get_cli:get:的解决方案
项目场景: 今天安装Getx命令行的时候,输入这面文档报了一个错: dart pub global activate get_cli 问题描述 提示:这里描述项目中遇到的问题: 例如:数据传输过程中数据不时出现丢失的情况,偶尔…...

短视频矩阵源码技术分享
在当今数字媒体时代,短视频已成为吸引观众和传递信息的重要手段。对于开发者而言,掌握短视频矩阵源码技术不仅是提升自身技能的需要,更是把握行业发展趋势的必然选择。本文将深入探讨短视频矩阵源码的关键技术要点及其实现方法,帮…...

轮播图自定义内容
官网:Swiper演示 - Swiper中文网 下载: npm i swiper Vue3示例代码: <template><div class"swiper mySwiper"><div class"swiper-wrapper"><div class"swiper-slide"><div>…...

大数据-44 Redis 慢查询日志 监视器 慢查询测试学习
点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…...

Istio_01_Istio初识
文章目录 IstioService Mesh Istio Istio: 以服务网格形态用于服务治理的开放平台和基础设施 本质: 以非侵入式治理服务之间的访问和调用服务治理: 流量管理、可观测性、安全性可同时管理多类基础设施(多种网络方案) 如: Istio和Kubernetes架构的结合 Istio通过Kubernetes的域…...

leetcode日记(47)螺旋矩阵Ⅱ
这题思路不难,就是找规律太难了。 我首先的思路是一行一行来,根据规律填入下一行的数组,第i行是由前i个数字(n-2*i)个增序数列后i个数字组成,后来觉得太难找规律了就换了一种思路。 思路大致是先计算出需…...

centos系统mysql主从复制(一主一从)
文章目录 mysql80主从复制(一主一从)一、环境二、服务器master1操作1.开启二进制日志2. 创建复制用户3. 服务器 slave1操作4. 在主数据库中添加数据 mysql80主从复制(一主一从) 一、环境 准备两台服务器,都进行以下操…...

IEDA怎么把springboot项目 启动多个
利用Idea提供的Edit Configurations配置应用参数。 点击Modify Options进行添加应用参数: 确保这里勾选...

Vue 3项目安装Element-Plus
Element Plus 是一个基于 Vue 3 的现代前端UI框架,它旨在提升开发体验,并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发,那么安装和集成 Element Plus 是一个不错的选择。在本文中,博主将详细介绍如何在 Vue …...

Git下载安装
一、介绍 Git是一个分布式版本控制系统,最初由Linus Torvalds创建,用于管理和跟踪代码的变化。它可以轻松地处理个人项目和大型团队项目的版本控制需求。 Git的主要特点包括: 分布式:每个开发者都可以拥有自己的本地仓库&#x…...

linux中的目录操作函数
参考 【Linux系统编程】Linux 文件系统探究:深入理解 struct dirent、DIR 和 struct stat结构 stat函数 C标准库提供了访问linux的目录的函数接口现对目录的操作。 一、libc接口 libc访问目录的流程为:打开目录,访问目录,关闭目…...

JSON 文件第一段飘红
问题 原因 这个问题通常发生在尝试用 ESLint 去解析 JSON 文件时。ESLint 主要设计用于检查 JavaScript 代码的语法和风格,而JSON是一种数据交换格式,不包含 JavaScript 的逻辑结构,如函数、变量声明等。 解释报错原因 当ESLint遇到它不能识…...

go使用gjson操作json数据
gjson使用 gjson介绍安装gjson库解析 JSON 字符串路径语法复杂查询遍历和修改结论 gjson介绍 gjson 是一个 Go 语言库,用于快速解析 JSON 数据。它提供了非常简洁的 API 来查询 JSON 数据,无需预先定义 Go 结构体或映射(map)来匹…...

Mac 下华为鸿蒙 :DevEco Studio 开发工具下载
1.登录:华为开发者中心--开发--下载工具DevEco Studio 2.下载完成后 ,安装,并创建一个新项目。 3.Tools --点击SDK Manager 下载SDK: 如果报:淘宝镜像源错误: npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_H…...

C进阶—动态内存管理
这里写目录标题 动态内存分配的原因动态内存函数mallocfreecallocrealloc C/C内存开辟柔性数组柔性数组特点 动态内存分配的原因 常见的内存开辟方式: int a 10;//在栈空间上开辟4个字节 char arr[10] {0};//在栈空间上开辟连续的10个字节上述开辟的空间问题&am…...

QT表格显示MYSQL数据库源码分析(七)
一. 连接MySQL数据库 首先,创建了一个QSqlDatabase对象,并设置数据库类型为"QMYSQL"。然后,它设置了数据库的主机名,端口号,数据库名,用户名和密码。最后,尝试打开数据库连接&#x…...

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出
一、介绍 在上篇文章中,我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库:easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具,底层逻辑也是基于 apache p…...

探索前后端数据传输模式:Java、Go与Python的实践20240719
深入解析前后端数据传输:Java、Go与Python的实践 引言 在当今的互联网时代,用户对Web应用的性能和交互体验有着越来越高的要求。无论是信息展示型网站还是复杂的企业应用,前后端数据传输的效率和模式选择都至关重要。本文将深入探讨三种主流…...

【YashanDB知识库】yac修改参数后关闭数据库hang住
【标题】yac修改参数后关闭数据库hang住 【问题分类】性能优化 【关键词】YashanDB, yac, shutdown hang 【问题描述】修改yac参数后执行shutdown immediate,数据库hang住。 【问题原因分析】 Shutdown操作时,线程在获取gInstance->trigger->s…...

提升网站性能:ThinkPHP6中如何实现Mysql分页查询
随着互联网的快速发展,web应用程序的开发也越来越复杂。而分页查询是web应用程序中常见的功能之一。thinkphp6是一个web框架,可以帮助开发人员快速开发应用程序。在本文中,我们将讨论如何在thinkphp6中使用mysql进行分页查询。 首先…...

Python:Flask自定义URL路由参数过滤器
目录 简单的例子手动类型转换自动类型转换自定义路由过滤器 简单的例子 先看一个简单的例子,GET请求需要传递一个参数,我们直接获取的是字符串 from flask import Flaskapp Flask(__name__)app.get("/<value>") def index(value):ret…...

闭包与装饰器
一.闭包: 闭包是Python中的一种高级特性,指的是在函数内部定义了另外一个函数,并返回了这个内部函数作为函数对象,同时还保存了外层函数的状态信息。这个内部函数可以依赖外层函数的变量和参数,而且外层函数返回的是这…...

DNS服务器的搭建
1、DNS服务器端软件 DNS 的域名解析都是 udp/53 . 主从之间的数据传输默认使 ⽤tcp/53 DNS服务器端软件: Bind是⼀款开放源码的DNS服务器软件,Bind由美国加州⼤学Berkeley(伯克 利)分校开发和维护的,全名为Berkele…...

【JavaScript】点击穿透
点击穿透是指在某些场景下,⽤户在快速点击⻚⾯元素时,由于某些原因(例如⽹络延迟), 在前⼀个元素上的点击事件还没有完成时,下⼀个元素的点击事件就已经触发了,导致⽤户感 觉到⻚⾯点击⽆效或者…...

[Linux]Mysql之主从同步
AB复制 一、主从复制概述 主从复制,是用来建立一个和主数据库完全一样的数据库环境,称为从数据库;主数据库一般是准实时的业务数据库。 主从复制的作用 1.做数据的热备,作为后备数据库,主数据库服务器故障后…...

DAY21-二叉树
LeetCode538.把二叉搜索树转换为累加树 public TreeNode convertBST(TreeNode root) {reverseIn(root);return root;}public Integer value0,flag0;public void reverseIn(TreeNode root) {if(rootnull) return ;reverseIn(root.right);if(flag0) {valueroot.val;flag1;}else {…...

java面试-场景题
一、集合 1. java中如何给一个超大的一个亿左右的list数据去重? 我当时的回答是使用HashSet或Stream流的distinct语法。但是面试官好像更注重内存的消耗问题。 使用HashSet: HashSet 是一个不允许有重复元素的集合。你可以将List中的元素添加到HashSe…...