前端JS必用工具【js-tool-big-box】,防抖和节流的方法调用学习

这一小节,我们针对前端工具包(npm)js-tool-big-box的使用做一些讲解,主要是防抖和节流方面的。

目录

前言

1 安装和引入

2 防抖的调用学习 

3 节流的调用学习

4 使用方法总结 


前言

在前端项目中,经常涉及到防抖和节流,比如用户频繁的输入进行检索,比如频繁的resize浏览器窗口,比如频繁的下拉刷新,这些都可能涉及到在短时间内多次与服务端进行交互,所以,所以,所以,大家经常在项目内定义一个 utils 目录,里面写上 防抖(debounce)节流(throttle)的公共方法,进行调用。

现在好啦,js-tool-big-box工具包提供出了这个两个方法,并有专门的团队进行维护公有方法,大家可以直接调用,减少了自己的代码量,可以有更多的时间去专注于自己的业务开发。

1 安装和引入

执行安装命令

npm i js-tool-big-box

项目中引入(Vue项目),工具包对外提供了 eventBox 对象,可以用来调用防抖和节流的方法。

import { eventBox } from 'js-tool-big-box';

2 防抖的调用学习 

防抖呢,比如说一个人频繁在输入框输入值,然后我们需要去判断它输入的手机号对不对,邮箱对不对,后者拿着这个输入值去发送Ajax请求去查东西,肯定不能输入一个字符就赶紧拿着去查,对吧,所以就需要防抖。

防抖呢就是设定一个时间值,比如2秒,你在这2秒内有操作,就取消,一直到2秒后没有操作了,再去执行任务。

比如等电梯,早上着急打卡的同学们,越着急,越有人按电梯,有人按一下就得等5秒,除非有人急的不行了,按了关闭按钮。所以,等5秒,没人上了,电梯关闭,开始往上走。如果第4秒又有人按按钮,他进来了,那么就再等5秒吧。

<template><div><input @keyup="handleChange" v-model="inputVal" /></div>
</template><script>
import { eventBox } from 'js-tool-big-box';export default {name: 'dj',data () {return {inputVal: ''}},created() {this.myDebounce = eventBox.debounce((data) => {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val = event.target.value;this.myDebounce(val);},sendAjax(data) {console.log('发送时间::', new Date().getTime());console.log('发送请求:', data);},}
}
</script>

 

 

在截图中,我分别输入了1   222 333 ,其中222和333是频繁输入的,然后只调用了一次

3 节流的调用学习

节流呢,就像坐火车,人来人往的车站,川流不息的人群,但火车有时刻表,隔多久一趟车。下拉刷新就正好用到这个地方。

<script>
import { eventBox } from 'js-tool-big-box';export default {name: 'dj',data () {return {inputVal: ''}},created() {this.myThrottle = eventBox.throttle((data) => {this.sendAjax(data);}, 2000);},methods: {handleChange(event) {const val = event.target.value;this.myThrottle(val);},sendAjax(data) {console.log('发送时间::', new Date().getTime());console.log('发送请求:', data);},}
}
</script>

看这个时间戳打印的,我一直在频繁输入,然后他隔一段时间才执行一次,不错不错,节流了。

4 使用方法总结 

方法名返回值入参
debounce传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

throttle传入的执行方法

第一个参数必填,表示需要执行的方法,

第二个参数非必填,表示需要延迟执行的时间,可不传,默认300毫秒

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/3660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Redis实现延时队列

redis的zset实现延迟队列 延迟队列是什么&#xff1f; 延时队列相比于普通队列最大的区别就体现在其延时的属性上&#xff0c;普通队列的元素是先进先出&#xff0c;按入队顺序进行处理&#xff0c;而延时队列中的元素在入队时会指定一个延迟时间&#xff0c;表示其希望能够在经…

多数据源注解使用

<dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.0</version> </dependency> 1.使用mybatis-plus 如何配置多数据源&#xff0c;application-loc…

vue使用海康控件开发包——浏览器直接查看海康监控画面

1、下载控件开发包 2、安装插件&#xff08;双击/demo/codebase/HCWebSDKPlugin.exe进行安装&#xff09; 3、打开/demo/index.html文件 4、在页面上输入你的海康监控的登录信息进行预览 如果有监控画面则可以进行下面的操作 注意&#xff1a;以下操作都在Vue项目进行 5、复…

静态链接lib库使用

lib库实际上分为两种&#xff0c;一种是静态链接lib库或者叫做静态lib库&#xff0c;另一种叫做动态链接库dll库的lib导入库或称为lib导入库。这两个库是不一样的&#xff0c;很多人都分不清楚&#xff0c;很容易混淆。 第一种是静态lib&#xff0c;包含了所有的代码实现的&am…

android studio集成 百度云推送项目实战 注意事项

onBind errorCode0(成功码) appid8543666(appid后台生成) userId1107752540659249906(用户Id) channelId3723987107990995031 requestId1268411415 1.首先查看应用包名是否一致 2.查看key是否一致 <meta-data android:name“api_key” android:value“KRxGMFpmQkXEgZDGG…

python 自动操作电脑

目录 python 模拟点击,在指定位置输入文字 模拟鼠标右键 一、pyautogui是什么 <

Centos 5 的yum源

背景 有使用较老的Centos 5 系统内部安装软件无法正常报错&#xff0c;是由于系统叫老yum源存在问题 处理方法 更换下述yum源&#xff0c;可以将其他repo源文件备份移动到其他目录&#xff0c;添加下述源后重新测试 [C5.11-base] nameCentOS-5.11 baseurlhttp://vault.c…

Electron vue 进程间消息通行

在 Electron 应用中&#xff0c;IPC&#xff08;Inter-Process Communication&#xff0c;进程间通信&#xff09;是一种允许主进程&#xff08;main process&#xff09;和渲染进程&#xff08;renderer process&#xff09;之间交换数据的方式。 ipcRenderer.send 在渲染进程…

Jackson 2.x 系列【31】Spring Boot 集成之字典回写

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Jackson 版本 2.17.0 本系列Spring Boot 版本 3.2.4 源码地址&#xff1a;https://gitee.com/pearl-organization/study-jaskson-demo 文章目录 1. 场景描述2. 案例演示2.1 修改枚举2.2 定义注解…

Gitflow实操以及代码审查Pull Request操作

1.背景 之前一直有用过gitflow&#xff0c;但是一直没有归纳技术&#xff0c;另一方面也是每个团队用到的gitflow都不一致。而最近做项目要用gitflow&#xff0c;趁此机会分享一下gitflow的操作。 2.gitflow介绍 用git一直有一个问题&#xff0c;就是怎么保证代码稳定性&…

服务器如何开启远程连接?

服务器开启远程连接是网络管理中一项重要的功能。通过远程连接&#xff0c;用户可以在任何地方远程访问服务器&#xff0c;从而进行管理、维护和监控等操作。远程连接的开启可以为工作提供便利性和效率&#xff0c;但同时也带来了安全风险。确保远程连接的安全性和可靠性是至关…

RPC的介绍和架构发展

RPC概念&#xff1a; RPC是远程过程调用协议&#xff0c;是一种不需要了解底层网络技术&#xff0c;调用远程计算机服务。 RPC框架的组成&#xff1a; 图1 当总项目的数据量、访问量不断提高&#xff0c;就把他分成多个服务&#xff0c;减轻单体机器的压力。分开的ABC服务之…

python高阶函数:zip()

概述与基本用法 zip() 是 Python 内置函数之一&#xff0c;用于将多个可迭代对象打包成一个元组序列&#xff0c;然后返回一个迭代器。它可以接受任意数量的可迭代对象作为参数&#xff0c;并将它们的元素按顺序一一对应地打包成元组。 以下是 zip() 函数的基本用法&#xff…

【前端】vue3树形组件使用

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、树形组件简介二、树形组件使用三、总结 前言 随着开发语言及人工智能工具的普及&#xff0c;使得越来越多的人学习使用vue前端工具&#xff0c;本文主要介…

iOS - 多线程-GCD-队列组

文章目录 iOS - 多线程-GCD-队列组1. 队列组1.1 基本使用步骤 iOS - 多线程-GCD-队列组 开发过程中&#xff0c;有时候想实现这样的效果 多个任务并发执行所有任务执行完成后&#xff0c;进行下一步处理&#xff08;比如回到主线程刷新UI&#xff09; 1. 队列组 可以使用GC…

npm安装时一直idealTree:npm: sill idealTree buildDeps卡住不动

npm安装时一直idealTree:npm: sill idealTree buildDeps卡住不动 解决步骤&#xff1a; 1.去以下的目录中删掉.npmrc文件&#xff08;只在C:\User.npmrc&#xff09; 2.清除缓存&#xff0c;使用npm cache verify 不要用npm cache clean --force&#xff0c;容易出现npm WAR…

tsconfig.json 常用属性配置和注释

下面是一个详细的 tsconfig.json 文件示例&#xff0c;其中包含了许多常用的配置选项。这个配置适用于一个使用 TypeScript 进行前端和后端开发的通用项目。 {"compilerOptions": {"target": "es6", // 指定 ECMAScri…

大文件的分片上传和断点上传

一、大文件的分片上传 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Chunked File Upload</title> </head> <body><input type"file" id"fileInput">…

onlyoffice 插件执行后如何将消息返回给页面进行处理返回消息

使用免费的onlyoffice&#xff0c;前端操作插件是困难的&#xff0c;但是虽然是困难的&#xff0c;也是可以解决的&#xff0c;猜想这块内容是收费部分给封装起来了&#xff0c;既然要用免费的&#xff0c;那就要自己实现。 使用方法docEditor.serviceCommand(cmd,param); 可以…

【C++】:构造函数和析构函数

目录 前言一&#xff0c;构造函数1.1 什么是构造函数1.2 构造函数的特性1.3 总结 二&#xff0c;析构函数2.1 什么是析构函数2.2 析构函数的特性2.3 总结 前言 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何…