首页 > 其他分享 >防抖

防抖

时间:2024-04-20 16:45:38浏览次数:18  
标签:防抖 const 函数 debounce callback any

lodash库提供的debounce函数用于限制传入函数的调用频率,确保函数在指定的时间间隔内最多只执行一次。debounce返回的函数本身并不是异步的,它只是限制了调用频率,但并不改变传入函数的同步或异步特性
下面案例包含了输入框防抖和按钮防抖

<template>
      <el-button type="success" @click="buttonDebounce">防抖按钮测试</el-button>

      <el-form :model="textForm">
          <el-form-item label="防抖测试输入框:" prop="text" :rules="rules">
              <el-input v-model="textForm.text" style="width: 120px;"></el-input>
          </el-form-item>
      </el-form>

</template>

<script>
import { debounce } from 'lodash';

const buttonDebounce = debounce(() => {
    console.log("防抖测试");
}, 900);

const validateText = debounce((rule: any, value: any, callback: any) => {
    if(value.length < 4)    callback(new Error("长度至少为4"))
    else                    callback()
}, 900)

const rules = [
    { required: true, trigger: 'change', validator: validateText }
]

</script>

标签:防抖,const,函数,debounce,callback,any
From: https://www.cnblogs.com/twinkler/p/18147757

相关文章

  • element的表格页面宽度变化问题 (防抖函数)
      //表格问题(防抖函数) constdebounce=(fn,delay)=>{ lettimer=null; returnfunction(){ letcontext=this; letargs=arguments; clearTimeout(timer); timer=setTimeout(function(){ fn.apply(context,args); },delay); } } const_R......
  • 节流和防抖
    这个防抖和节流吧,老是记住了之后,过段时间后,又忘记了!然后请教大佬,到底怎么记住呢!好好好,现在这个防抖,治疗帕金森,刻烟吸肺了。1. 防抖debounce防抖:debounce,不会立马执行的,触发后,过一段时间执行,如果在时间到达之前又触发了,那重新等待。常用于比如我们下拉框关键字输入远程搜索,......
  • js函数防抖
    functiondedounce(fn,duration){lettimeId;//此处的this指向windowsreturnfunction(){//此处的this指向调用函数的对象constthat=this;if(timeId){clearTimeout(timeId);}//这个地方的......
  • 手写防抖节流
    防抖持续频繁触发某个机制,则需要等待指定的时间再执行。/**手写防抖*用法:函数在n秒后再执行,如果n秒内被触发,重新计时,保证最后一次触发事件n秒后才执行。*思路:*1、保存一个变量timer*2、返回一个闭包函数函数内判断一下timer是否有值*2.1、如果有......
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch
    00-开始前端基础知识HTMLCSSJSHTTP等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。为何要考察扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘......
  • react防抖节流
    防抖importReact,{useState,useEffect}from'react';constDebounceExample=()=>{const[inputValue,setInputValue]=useState('');useEffect(()=>{constdelay=1000;//设置防抖延迟时间为1秒consttimer=setTimeou......
  • 节流和防抖
    节流(throttling)和防抖(debouncing)一、概念节流(throttling)和防抖(debouncing)是在处理用户输入和其他事件时常用的两种性能优化技巧。它们的主要目的是控制事件触发的频率,以避免不必要的重复操作,减轻系统负担,提高用户体验。1.节流(Throttling):节流是一种限制事件处理函数执行频率的技......
  • 详细解读JavaScript中的防抖(debounce)和节流(throttle)!!!
    在JavaScript中,防抖(debounce)和节流(throttle)是两种常用的技术,用于限制函数的执行频率,特别是在处理高频事件(如窗口的resize、scroll,输入框的keyup、mousedown等)时非常有用。防抖(debounce)防抖的基本思想是将多次执行变为最后一次执行。也就是说,在事件被触发后n秒内函数只能执......
  • 分享一个之前开发的react键盘事件的快捷键实现,组合键,支持防抖和节流,通过自定义hooks实
    npm包地址:linkgithub地址:linkreact-khooksGettingStarted......
  • js面试(防抖)
    一、什么是防抖防抖(Debounce)是一种用于减少特定事件触发频率的技术。在编程中,它通常用于确保函数或方法不会在很短的时间内被频繁调用,这有助于优化性能并避免不必要的计算或操作。防抖的实现原理是,在事件被触发后,一个定时器会被设置。如果在定时器完成之前,相同的事件再次被触发,......