vue3+ts如何通过lodash实现防抖节流详解

目录
  • 安装lodash
  • 防抖
  • 节流
  • 补充：vue3 引入lodash报错
  • 总结

安装lodash

npm i --save-dev @types/lodash

在组件中引入lodash

import * as _ from 'lodash'

防抖

_.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行，也就是停止改变几秒后执行

参数

  1. func (Function): 要防抖动的函数。
  2. [wait=0] (number): 需要延迟的毫秒数。
  3. [options=] (Object): 选项对象。
  4. [options.leading=false] (boolean): 指定在延迟开始前调用。
  5. [options.maxWait] (number): 设置 func 允许被延迟的最大值。
  6. [options.trailing=true] (boolean): 指定在延迟结束后调用。
<script setup lang="ts">
	import * as _ from 'lodash'

	//防抖的函数应该是click事件
	const fangdou = _.debounce(click, 500, {
	  leading: true,  // 延长开始后调用
	  trailing: false  // 延长结束前调用
	})

	function click() {
		//响应点击
	  console.log("123")
	}
	//移除组件时，取消防抖
	onUnmounted(()=>{
	  fangdou.cancel()
	}) 

</script>

<template>
  <button @click="fangdou">fangdou</button>
</template>

节流

_.throttle(func, [wait=0], [options=]) 第一次会立即执行一次，然后等到过了毫秒数才会执行，以一定的频率后续处理

参数

  1. func (Function): 要节流的函数。
  2. [wait=0] (number): 需要节流的毫秒。
  3. [options=] (Object): 选项对象。
  4. [options.leading=true] (boolean): 指定调用在节流开始前。
  5. [options.trailing=true] (boolean): 指定调用在节流结束后。
<script setup lang="ts">
   import * as _ from 'lodash'

   const throttle = _.throttle(() =>{
     console.log('I get fired every two seconds!')
   },2000,{
     leading: true,
     trailing: false
   })
   //移除组件时，取消节流
   onUnmounted(()=>{
     throttle.cancel()
   })
</script>

<template>
   <button @click="throttle">jieliu</button>
</template>

补充：vue3 引入lodash报错

在 shims-vue.d.ts 文件夹下添加

declare module 'lodash'

全部代码

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

declare module 'lodash'

总结

到此这篇关于vue3+ts如何通过lodash实现防抖节流的文章就介绍到这了,更多相关vue3+ts lodash防抖节流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 中使用lodash对事件进行防抖和节流操作

    有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动事件可能在 3 秒内触发数千次,这可能会导致一些严重的性能问题. 如果在面试中讨论构建应用程序,出现滚动.窗口大小调整或按下键等事件请务必提及 防抖(Debouncing) 和 函数节流(Throttling)来提升页面速度和性能.这两兄弟的本质都是以闭包的形式存在.通过对事件对应的回调函数进行包裹.以自由变量的形式缓存时间信息,最后用 setTimeou

  • 手写Spirit防抖函数underscore和节流函数lodash

    手写Spirit防抖函数underscore和节流函数lodash

    目录 前言 防抖函数和节流函数的区别 防抖函数的实现 基本实现 立即执行 取消功能 返回结果 节流函数的实现 基本实现 leading实现 trailing实现 取消功能和返回结果 前言 防抖函数和节流函数,无论是写业务的时候还是面试的时候,想必大家已经听过很多次了吧.但是大家在用到的时候,有了解过他们之间的区别嘛,他们是如何实现的呢?还是说只是简单的调用下像lodash和underscore这种第三方库提供给我们的节流和防抖函数呢? 防抖函数和节流函数的区别 防抖函数:是指触发了一个事件,在规

  • vue3+ts如何通过lodash实现防抖节流详解

    目录 安装lodash 防抖 节流 补充:vue3 引入lodash报错 总结 安装lodash npm i --save-dev @types/lodash 在组件中引入lodash import * as _ from 'lodash' 防抖 _.debounce(func, [wait=0], [options=]) 函数在延迟几毫秒之后才执行,也就是停止改变几秒后执行 参数 func (Function): 要防抖动的函数. [wait=0] (number): 需要延迟的毫秒数. [o

  • JS前端同源策略和跨域及防抖节流详解

    目录 引言 jQuery中JSONP的实现 防抖[重要] 缓存搜索的列表 1 定义全局缓存对象 2:将搜索结果存储到缓存对象中 3优先从缓存中获取搜索列表 节流[重点] 防抖和节流的区别 引言 协议,域名,端口相同,就具有相同的源 同源策略:浏览器提供的一个安全策略 跨域的出现原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互 解决跨域由两种方式:JSONP, CORS JSONP: 只支持GET请求 通过script标签的src属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域

  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    目录 前言 防抖或节流原理 防抖(debounce) 示例代码 使用 节流(throttle ) 示例代码 使用 环境说明 新封装 防抖(debounce) 常见封装-1 常见封装-2 新封装 使用 节流(throttle) 常见封装-1 常见封装-2 新封装 总结 前言 今天给大家带来的是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单.更清晰. 在前端的开发过程中,在涉及到与用户交互的过程中是基

  • Vue3+TS+Vant3+Pinia(H5端)配置教程详解

    该模板将帮助您开始使用Vue 3.Vite3.0中的TypeScript以及Pinia.Vant3进行开发.该模板使用Vue3,请查看文档了解更多教程. 推荐的IDE设置 VS Code + Volar 键入支持.TS中的vue导入 因为TypeScript无法处理的类型信息.vue导入,默认情况下,它们填充为通用vue组件类型.在大多数情况下,如果您不真正关心模板之外的组件道具类型,那么这很好.然而,如果你想得到实际的道具类型.vue导入,您可以通过以下步骤启用Volar的接管模式: 1.运行

  • vue3中的透传attributes教程示例详解

    vue3中的透传attributes教程示例详解

    目录 引言 绑定样式 对象 数组 透传的attributes 透传 attributes 之样式绑定 透传 attributes 之事件绑定 特殊1:组件嵌套 特殊2:禁用透传attributes 特殊3:在 javascript 中访问透传的attributes 总结 引言 最近两年都是在使用 react 进行项目开发,看技术博客都是针对 react 和 javaScript 高级方面的,对 vue 的知识基本上遗忘的差不多了.最近开始慢慢回顾 vue 的知识以及对新的语法进行学习,为后面的计

  • vue3调度器effect的scheduler功能实现详解

    目录 一.调度执行 二.单元测试 三.代码实现 四.回归实现 五.结语 一.调度执行 说到scheduler,也就是vue3的调度器,可能大家还不是特别明白调度器的是什么,先大概介绍一下. 可调度性是响应式系统非常重要的特性.首先我们要明确什么是可调度性.所谓可调度性,指的是当trigger 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机.次数以及方式. 有了调度函数,我们在trigger函数中触发副作用函数重新执行时,就可以直接调用用户传递的调度器函数,从而把控制权交给用户. 举

  • JavaScript 函数节流详解及方法总结

    JavaScript 函数节流详解 浏览器一个网页的UI线程只有一个,他同时会处理界面的渲染和页面JavaScript代码的执行(简单扩展一下,浏览器或者JavaScript运行大环境并不是单线程,诸如ajax异步回调.hybrid框架内与native通信.事件队列.CSS运行线程等等都属于多线程环境,不过ES6引入了Promise类来减少了部分异步情况).因此当JavaScript代码运行计算量很大的方法时,就有可能阻塞UI线程,小则导致用户响应卡顿,严重的情况下浏览器会提示页面无响应是否强制

  • 在vue-cli中引入lodash.js并使用详解

    lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库. 在vue官方文档中使用了lodash中的debounce函数对操作频率做限制.其引入的方式是直接引入了js <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> 而现在我们使用vue-cli脚手架搭建的项目在这样使用,明显会很不合适.所以我们需要通过npm来安装 $ npm

  • Vue3中Vuex状态管理学习实战示例详解

    目录 引言 一.目录结构 二.版本依赖 三.配置Vuex 四.使用Vuex 引言 Vuex 是 Vue 全家桶重要组成之一,专为 Vue.js 应用程序开发的 状态管理模式 + 库 ,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 一.目录结构 demo/ package.json vite.config.js index.html public/ src/ api/ assets/ common/ components/ store/ index.

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

随机推荐