首页 > 其他分享 >防抖

防抖

时间:2024-01-30 09:22:07浏览次数:23  
标签:function 防抖 const debounce args context var

function debounce(func, delay) {     let timerId;        return function() {         clearTimeout(timerId); // 清除之前设置的计时器                const context = this;         const args = arguments;                  timerId = setTimeout(() => {             func.apply(context, args);         }, delay);     }; }   // 使用示例 const myFunction = () => {     console.log("Hello World!"); };   const debouncedFunc = debounce(myFunction , 1000); // 创建防抖后的函数       //微信小程序 function debounce(fn,interval) {     var timer     var gaptime = 1000     return function () {         clearTimeout(timer)         var context = this         var args = arguments     timer = setTimeout(function () {     fn.call(context,args)         console.log(fn,'11111111111111')     },gaptime)
    } }   module.exports = {     debounce, }   //页面js import tool from '../../../utils/util'     Clik:tool.debounce(function name(evt) {         this.signin()    //要调用的方法     }),

标签:function,防抖,const,debounce,args,context,var
From: https://www.cnblogs.com/sishe/p/17995760

相关文章

  • js封装防抖函数
    js封装的防抖函数/**防抖函数*@param{Function}func*@param{number}wait*@param{boolean}immediate*@return{*}*/exportfunctiondebounce(func,wait,immediate){lettimeout,args,context,timestamp,resultconstlater=function(){......
  • 防抖节流的应用场景
    1.防抖:表单验证:当用户在输入框中输入内容时,可以使用防抖来延迟验证用户输入的内容,减少验证的频率。按钮点击:当用户频繁点击按钮时,可以使用防抖来确保只有最后一次点击生效,避免重复提交或触发不必要的操作。搜索框自动补全:当用户在搜索框中输入关键字时,可以使用防抖来延迟发送请求,减......
  • JavaScript手搓"防抖"优化代码
    一、为什么要防抖就好比我们想象一个场景:当我们在使用我们的页面,我们页面有一个提交数据的按钮!我们每次点击提交按钮,都会向我们的后端服务器发送一个请求!接下来我们来构建一下这样一个简单的页面!<buttonid="submit">提交</button><script>letsub=document.getEle......
  • vue3中自定义ref实现防抖
    import{customRef}from"vue";/***@description自定义ref实现防抖*@param{String}value*@param{Number}delay*@returns*/exportconstdebounceRef=(value,delay)=>{lettimer;returncustomRef((track,trigger)=>({......
  • 《优化接口设计的思路》系列:第六篇—接口防抖(防重复提交)的一些方式
    一、前言大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。作为一名从业已达六年的老码农,我的工作主要是开发后端Java业务系统,包括各种管理后台和小程序等。在这些项目中,我设计过单/多租......
  • 一篇文章理清什么是防抖、节流
    防抖和节流是两种常见的前端优化技术,用于限制函数的执行次数。防抖是指在事件被触发后,等待一段时间后执行函数。如果在这段时间内事件再次被触发,那么计时器会被重置,重新等待一段时间后执行函数。这可以防止函数被频繁调用,特别是一些高频事件(如窗口调整大小、滚动等)。functiondebou......
  • 《优化接口设计的思路》系列:第六篇—接口防抖(防重复提交)的一些方式
    一、前言大家好!我是sum墨,一个一线的底层码农,平时喜欢研究和思考一些技术相关的问题并整理成文,限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。作为一名从业已达六年的老码农,我的工作主要是开发后端Java业务系统,包括各种管理后台和小程序等。在这些项目中,我设计过单/多......
  • JavaScript 防抖和节流
    JavaScript防抖和节流防抖以下js类库实现方法:lodash.debounceunderscore-debounce最初接触实现一个防抖函数的需求,是在前端封装React组件的过程中,当时是要实现一个搜索下拉框,根据输入提示搜索内容。根据<input>的input事件来监听用户输入,并调用后端接口传递输入信息......
  • 记录--闭包,沙箱,防抖节流,函数柯里化,数据劫持......
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助函数创建与定义的过程函数定义阶段在堆内存中开辟一段空间把函数体内的代码一模一样的存储在这段空间内把空间赋值给栈内存的变量中函数调用阶段按照变量名内的存储地址找到堆内存中对应的存储空间......
  • 函数防抖-节流
     /***函数防抖*@param{function}fn执行函数*@param{number}delay延迟时间毫秒*@param{boolean}immediately是否立刻执行函数*/functiondebounce(fn,delay,immediately){vartimer=null,firstInvoke=true;returnfunction(){if......