去抖动和节流--debounce和throttle

裂变
• 阅读 1227

缺点是不能完全封装

含义:fn立即执行一次,过了一段时间后,才允许再次执行

switch=true
execTime:number
throttle(fn,interval){
    if(new Date().getTime()-this.execTime>interval){this.switch=true}
    if(this.switch){
        fn();
        this.switch=false;
        this.execTime=new Date().getTime();
    }
    
}

二 去抖动 debounce

1.含义:去抖动函数不断执行,直到去抖动函数停止执行多少毫秒后,受保护的函数才执行

eg:

this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
this.debouncedGetAnswer()
//debouncedGetAnswe:去抖动函数
//this.getAnswer:受保护的函数

2.适用场景

(1)键盘输入:用户不断输入,如果暂定时间超过多少毫秒,就接受用户的输入

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
海军 海军
4年前
浅聊函数防抖与节流
防抖(debounce)所谓防抖,就是指触发事件后n秒后才执行函数,如果在n秒内又触发了事件,则会重新计算函数执行时间。防抖类型分为1.非立即执行版2.立即执行版3.合成版本防抖防抖应用场景登录、发短信等按钮避免用户点击太快,以致于发送了多次请求调整浏览器窗口大小时,resize次数过于频繁,造成计算过多,此时需要一次到
vue 节流、拖拽指令
1、在开发中时长遇到按钮重复点击或者多次点击的情况比如创建订单或者其他情况,当然也可以通过设置变量开关,禁止状态,这里就分享一个节流的指令javascriptVUE3好像指令的生命周期和组件的生命周期同步了//立即执行版本,点击后会执行一次,然后进入定时器exportconstthrottle{inserted:function
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Chase620 Chase620
4年前
防抖和节流
防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算事件思路每次触发的时候取消之前的延时调用方法,以当下为准//防抖functiondebounce(fn){lettimeoutnull;returnfunction(){clearTimeout
LinMeng LinMeng
4年前
js的防抖与节流
在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。函数防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才
Stella981 Stella981
3年前
ES6 Promise 让异步函数顺序执行
应用ES6的内置对象Promise,让异步函数按顺序执行的例子如下:!(https://oscimg.oschina.net/oscnet/9d7da385127c5df3cdf50b984cc4bca58c7.jpg)上边是四个用Promise处理过的异步执行的函数:fn1、fn2、fn3、fn4下面,让其按顺序执行
Easter79 Easter79
3年前
SQL Server 2019中Function默认返回值会影响Function创建时规定的返回值类型
项目里客户端突然报错,原因是SQLServer中某个Function返回值有问题,拿来代码看还是比较简单的Function,虽然写法很不好,但是selectdbo.fn_xxxfunction(0)返回值是空就有点奇怪。IFOBJECT_ID('fn_xxxfunction','FN')ISNOTNULLDRO
Stella981 Stella981
3年前
SQL Server 2019中Function默认返回值会影响Function创建时规定的返回值类型
项目里客户端突然报错,原因是SQLServer中某个Function返回值有问题,拿来代码看还是比较简单的Function,虽然写法很不好,但是selectdbo.fn_xxxfunction(0)返回值是空就有点奇怪。IFOBJECT_ID('fn_xxxfunction','FN')ISNOTNULLDRO