首页 > 其他分享 >防抖函数

防抖函数

时间:2023-06-03 22:45:59浏览次数:55  
标签:防抖 定时器 函数 delay 调用 执行 fn

习题链接

防抖函数

课程列表

当一个函数在一定时间内被连续调用多次时,只执行最后一次调用,并在最后一次调用后延迟一定时间再执行。

关键点

  1. setTime()定时器
    1. 创建一个变量来存储定时器
    2. 每次执行函数的时候,都要先清除上一次的定时器,以达到只执行最后一次调用
    3. 闭包的概念,因为每一次执行函数的时候,才能清除上一次的定时器
    4. 在定时器中执行回调函数fn
  2. call()修改this指向,保持上下文不变
    1. 在执行回调函数的时候,要修改this指向
    2. 没有正确的this指向,在外部指向返回的函数的时候很可能会报错,因为没有正确的上下文直接报undefined
    3. 修改为fn.call(this,arguments);

代码实现 && 完整的代码

  1. 完整code
    function debounce(fn, delay = 0) {
        // TODO: 在这里写入具体的实现逻辑
        // 返回一个新的防抖函数
        // 即使函数在 delay 时间段内多次被调用,也只会在最后一次函数被调用的 delay 时间结束后执行
        let timer = null;      // 创建一个变量存储定时器
        return function () {
            clearTimeout(timer);      // 清除上一次的定时器
            timer = setTimeout(()=>{  // 给变量赋值
                fn.call(this,...arguments) // 等待delay时间,执行fn函数,并且修改当前的this指向,
            },delay);
        }
    }
    

标签:防抖,定时器,函数,delay,调用,执行,fn
From: https://www.cnblogs.com/DnmyCourage/p/17454824.html

相关文章

  • flatten()是对多维数据的降维函数
    flatten()是对多维数据的降维函数。flatten(),默认缺省参数为0,也就是说flatten()和flatte(0)效果一样。fromnumpyimport*a=array([[1,2],[3,4],[5,6]])aarray([[1,2],[3,4],[5,6]])a.flatten()array([1,2,3,4,5,6])......
  • Jmeter函数助手41-unescapeHtml
    unescapeHtml函数用于将HTML转义过的字符串反转义为Unicode字符串。Stringtounescape:填入字符 1、escapeHtml函数是将字符进行HTML转义,unescapeHtml函数函数则是将HTML转义过的字符反转,unescapeHtml函数和escapeHtml函数功能刚好相反。${__unescapeHtml(value="hello"+"w......
  • Python 的字符串内建函数
    Pythoncapitalize()方法将字符串的第一个字母变成大写,其他字母变小写print("第一个内建函数str.capitalize()")s1='a,b's2='A,B's3='a,BCD's4='a,B'#因为a前面有个空格,所以不显示大写print(s1.capitalize())print(s2.capitalize())print(s3.capi......
  • 3. 构造函数
    我们继续下去,刚刚谈到设计一个class,这一页刚刚出现的有这么一页,就是class呢,首先要有这样的一个声明,你叫它定义也可以啊,这个不是那么的绝对。然后我就又用了另外一页告诉各位说,其实可以把里面的实部虚部抽出来,这就是一个模板的概念,但这只是先给大家带一下概念,后面我仍然不会去讲......
  • Jmeter函数助手39-isPropDefined
    isPropDefined函数用于判断属性是否存在。变量的名称:填入属性名。如果属性名存在返回true,如果不存在返回false 1、jmeter的属性查看路径:测试计划右键“添加”->非测试元件->属性显示2、如果属性存在则返回true。${__isPropDefined(START.YMD)}3、如果属性不存在则返......
  • Jmeter函数助手38-isVarDefined
    isVarDefined函数用于判断变量是否存在。变量的名称:填入变量名称。如果变量存在返回true,如果不存在返回false 1、先一些定义变量${__isVarDefined(now)},now变量是不存在的故函数结果会返回false${__isVarDefined(tody)} ,today变量是存在的故函数结果会返回true ......
  • 深入分析Iter函数
    iter函数还有一个鲜为人知的用法:传入两个参数,使用常规的函数或任何可调用的对象创建迭代器。这样使用时,第一个参数必须是可调用的对象,用于不断调用(没有参数),产出各个值;第二个值是哨符,这是个标记值,当可调用的对象返回这个值时,触发迭代器抛出StopIteration异常,而不产出哨符。  ......
  • Oracle partition by 用法及函数
    Oraclepartitionby--函数row_number、rank、dense_rank--row_number:序号,不重复;例如:1,2,3,4,5--rank:排序,重复;例如:1,2,2,2,5--dense_rank:排序,不重复;例如:1,2,2,2,3--sum:求和,本行排名之前(包括本行排名)的总和--count:技术,包括本行排名一共有多少名SELECTt.*FROM(S......
  • Python 函数
    函数返回多个返回值defmultiple_return_value():importdatetimed=datetime.date.today()val_1='年份为:{}'.format(d.year)val_2='月份为:{}'.format(d.month)returnval_1,val_2#只需在return关键字后跟多个值(依次用逗号分隔)val=multip......
  • matlab中通过ode函数求解常微分方程附加简单的钟摆模型
    ✅作者简介:热爱科研的算法开发者,Python、Matlab项目可交流、沟通、学习。......