首页 > 其他分享 >【闭包应用】JS:防抖、节流

【闭包应用】JS:防抖、节流

时间:2023-10-31 22:13:43浏览次数:28  
标签:闭包 function 防抖 func JS timeout 操作 fn

1、防抖:当进行连续操作时,只执行最后一次的操作。

 //防抖的概念是 当进行连续操作时,只执行最后一次的操作。
    function debounce(fn, delayTime) {
      let timeout = null;

      return function () {
        if (timeout) {
          clearTimeout(timeout);
        }

        timeout = setTimeout(() => {
          fn.call(this);
          timeout = null;
        }, delayTime);
      };
    }

    function func() {}

    debounce(func,200)

 

 

2、节流:

节流的概念是在一定时间内,用户没有再次进行此操作,在固定时间范围内只让操作一次。简单的说就是此次操作时间和上次操作时间要大于时间差,时间差的值由用户指定。 实现原理:使用闭包创建私有变量,这个私有变量用来记录上次操作的时间,此次操作时间与这个私有变量的差值如果超过已设置的时间范围差值,则进行次函数调用,否则不进行调用此函数。  
   function func(){

    }

 
    /**
    fn:调用的函数;
    timeout:时间差
    */
    function throlle(fn,timeout){
      let time = 0;
      return function(){
        let time1 = new Date().getTime();
        if(time1 - time > timeout){
          fn.call(this)
        } else {
          time = time1
        }
      }
    }
    throlle(func,200);

 

 

标签:闭包,function,防抖,func,JS,timeout,操作,fn
From: https://www.cnblogs.com/liuyuanfang/p/17801697.html

相关文章

  • 理解Golang的闭包
    闭包是指一个函数值(functionvalue),它可以引用其函数体之外的变量闭包代码示例funcmakeSuffix()func(strstring)string{ varsuffix=".jpg" returnfunc(strstring)string{ ifstrings.HasSuffix(str,suffix){ returnstr }else{ //引用函数体之外......
  • 软件测试|Python对JSON的解析和创建详解
    简介JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,已经成为当今互联网应用中广泛使用的数据格式之一。Python提供了内置的模块来解析和创建JSON数据,使得在Python中处理JSON变得非常简单。本文将详细介绍Python对JSON的解析和创建过程,并提供示例代码来帮助大家更好......
  • js中字符串使用单引号还是双引号
    ES6如下描述:字符串静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。//badconsta="foobar";constb='foo'+a+'bar';//acceptableconstc=`foobar`;//goodconsta='foobar';constb=`foo${a}bar`;......
  • Node.js子进程:你想要知道的一切
    如何使用spawn(),exec(),execFile()和fork()对于单进程而言,Node.js的单线程和非阻塞特性表现地非常好。然而,对于处理功能越来越复杂的应用程序而言,一个单进程的CPU是远远无法满足需要的。无论你的服务器有多强大,单线程都是远远不够用的。事实上,Node.js的单线程特性......
  • SIP UserAgent (B2BUA client)——pjsip
    1.sipstackspjsip/bell-sip/sofia-sip/libeXosip/librehttps://github.com/staskobzar/sip_stacks_examples 2.sipuseragentandservernetworkarchitecture3. InstallingpjsiponUbuntuhttps://www.pjsip.orgsudoapt-getinstalllibasound2-devLinuxsys......
  • js实现web端批量下载
    使用场景:比如一个展现pdf文档列表的网页内需要允许客户自己勾选(可多选)需要打包下载的内容,最终以zip文件的形式在浏览器下载此功能也可在服务端实现,但是在web端实现可以降低服务器负载,提升客户体验。下面是代码<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8">......
  • PasteSpider之appsettings.json中的Serilog的配置,分流不同日志层级的信息!
    在实际使用Serilog中,我们通常会有不一样的需求,常见的比如1.按照等级,高级哪个等级的才记录2.记录文件每个多大,超过的划分到下一个文件中3.不同等级的记录到不同的位置中4.按照不一样的格式输出以下是PasteSpider中的appsettings.json中关于Serilog的配置"Serilog":{......
  • 【面试题】你理解中JS难理解的基本概念是什么?
    作用域与闭包作用域作用域是当前的执行上下文,值和表达式在其中“可见”或可被访问。如果一个变量或表达式不在当前的作用域中,那么它是不可用的。作用域也可以堆叠成层次结构,子作用域可以访问父作用域,反过来则不行。————MDN作用域最重要的特点是:子作用域可以访问父作用域,反之则......
  • mysql处理json格式的字段,一文搞懂mysql解析json数据
    文章目录一、概述1、什么是JSON2、MySQL的JSON3、varchar、text、json类型字段的区别二、JSON类型的创建1、建表指定2、修改字段三、JSON类型的插入1、字符串直接插入2、JSON_ARRAY()函数插入数组3、JSON_OBJECT()函数插入对象4、JSON_ARRAYAGG()和JSON_OBJECTAGG()将查询结果封装......
  • 面向Three.js开发者的3D自动纹理化开发包
    DreamTexture.js是面向three.js开发者的 3D模型纹理自动生成与设置开发包,可以为webGL应用增加3D模型的快速自动纹理化能力。图一为原始模型,图二图三为贴图后的模型。提示词:city,Realistic,cinematic,Frontview,Gamescenegraph1、DreamTexture.js开发包内......