首页 > 其他分享 >前端性能优化-防抖

前端性能优化-防抖

时间:2022-09-05 17:01:04浏览次数:77  
标签:防抖 场景 debounce 前端 timer setTimeout 优化 fn

防抖:如果短时间内大量触发同一事件,只会执行一次函数,将多次执行变为最后一次执行。

防抖函数的应用场景:

  • 按钮提交场景:防⽌多次提交按钮,只执⾏最后提交的⼀次
  • 服务端验证场景:表单验证需要服务端配合,只执⾏⼀段连续的输⼊事件的最后⼀次,还有搜索联想词功能类似⽣存环境请⽤lodash.debounce 

代码实现如下:

/防抖debounce代码:
function debounce(fn,delay) {
    var timer = null; // 创建一个标记用来存放定时器的返回值
    return function () {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timer); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果事件持续触发,就不会执行 fn 函数
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
   }
}

 

标签:防抖,场景,debounce,前端,timer,setTimeout,优化,fn
From: https://www.cnblogs.com/zrty/p/16658787.html

相关文章

  • 系统优化软件MacPilot
    还在为系统太卡,找不到好用的系统优化软件而苦恼吗?今天小编就为大家带来了MacPilot,MacPilotMac是一款能够为您修复、检查系统所有垃圾文件,浏览历史等,并为您清理所有不需要......
  • 【校招VIP】[前端][二本][6分]简历的板式比较标准
    关注【校招VIP】公众号,回复【简历】,添加校招顾问微信,即可获取简历指导!本份简历是一位21届二本前端同学的简历,简历评分6分。一、学员简历二、指导意见简历的版式没有问......
  • 前后端分离前端框架的主要内容是什么?
    当前,前后端分离已经成为发展趋势和方向,是互联网项目开发的业界标准使用方式。那么,大家知道什么是前后端分离吗?其实,就是通过nginx+tomcat的方式(也可以中间加一个nodejs)有效......
  • 下载前端项目中自带的文件到本地
    functiondownload(down_questionNo,type){$.ajax({url:"/comtion-web/doc/"+down_questionNo+type,//本地文件存放的位置type:"GET",async:false,mimeType......
  • 日常开发记录-前端浏览器高级调试技巧整理
    1. 一键重新发起请求场景:在和后端联调时用的比较多,快速的重发请求,不用再在页面上点击步骤:选中“Network” 点击Fetch/XHR选择要重新发送的请求(鼠标点击一下)右......
  • [前端][一本][6分] 项目部分的描述可以多加扩展
    关注【校招VIP】公众号,回复【简历】,添加校招顾问微信,即可获取简历指导!本份简历是一位21届一本前端同学的简历,简历评分6分。一、学员简历二、指导意见简历版式没有问题......
  • DP 优化
    只是DP优化罢了,其他乱七八糟的DP根本不会。全文只是我自己的理解,有逻辑上的错误请指出来qwq斜率优化DP斜率优化的流程是这样的。首先列出DP式子,接着钦定两个在......
  • 【前端】相关高效率工具(已更新21个)
    1、AnimXYZ官网:https://animxyz.com/AnimXYZ可以帮助你拆过你见,自定义和组合复杂的动画!AnimXYZ使用CSS变量来实现动画,无需编写单个关键帧而实现无限数量的独特动画!节省......
  • Serverless 架构下的 AI 应用开发:入门、实战与性能优化
    作者:Serverless随着时间的推移,Serverless架构变得越来越火热,凭借着极致弹性、按量付费、低成本运维等特性,在很多领域发挥着越来越重要的作用;机器学习领域在近些年也非常......
  • mysql优化
    一、配置文件1、查看修改字符集1)、查看:showvariableslike'character%'showvariableslike'%char%'2)、编辑:vi/etc/my.cnf2、mysql配置文件1)、二......