首页 > 其他分享 >手写节流函数-基本实现

手写节流函数-基本实现

时间:2024-10-22 19:45:48浏览次数:1  
标签:function index const 节流 点击 let hdcthrottle 手写 函数

  <button class="btn">按钮</button>
  <!-- <script src="./js/underscore.js"></script> -->
  <script>
    function hdcthrottle(fn,time){
      //获取开始时间
      let startTime = 0
      const _throttleFn= function(){
        //每次点击获取点击的时间
       const nowTime = new Date().getTime()
      //  等待的时间 = 间隔时间 -(每次点击的时间-开始时间)
       let waitTime = time - (nowTime - startTime)
        if(waitTime <= 0 ){
          fn.apply(this)
          // 让开始时间等于下次执行点击的时间
          startTime = nowTime
        }
      }
      return _throttleFn
    }
  </script>
  <script>
    const btnEl = document.querySelector(".btn")
    let index = 1
    btnEl.onclick =hdcthrottle(function(){
      console.log(`第${index++}次执行`,this.value)
    },1000)
  </script>

标签:function,index,const,节流,点击,let,hdcthrottle,手写,函数
From: https://www.cnblogs.com/hdc-web/p/18493596

相关文章

  • 手写丐版immerjs
    手写丐版immerjs:constcreateProxy=(target)=>{constdata={__initial:target,__copy:null,__isModified:false}consthandler={get(state,attr){if(!state.__isModified)returnstate.__initial[attr]if(sta......
  • 节流throttle函数
    认识节流throttle函数◼我们用一副图来理解一下节流的过程当事件触发时,会执行这个事件的响应函数;如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数;不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的;节流的应用场景:➢监听页面......
  • 防抖函数-手写(基本实现)
    <button>按钮</button><inputtype="text"><!--本地引入:下载js文件并且本地引入--><!--<scriptsrc="./js/underscore.js"></script>--><script>/*自己实现函数需要做的事情......
  • 编程时怎么把函数当做变量使用
    在编程时,把函数当做变量使用的方法包括:1.函数赋值给变量;2.函数作为参数传递;3.将函数作为返回值;4.匿名函数与Lambda表达式;5.函数式编程的应用。在编程中善于利用函数作为变量的特性,能够写出更简洁、模块化和易于维护的代码。1.函数赋值给变量在许多编程语言中,函数可以像......
  • 【React】高阶函数运用(附代码)
    在React中,使用高阶组件(Higher-OrderComponent,HOC)是一种常见的设计模式,用于增强组件的功能。那么在实际中我们会在何时用到呢?我们设计组件的目标是为了极大的解决业务使用问题,使用便利性和可扩展性则是我们设计组件的最大目标!比如一个简单的场景,需要我们开发一个对话框,该......
  • 海量大模型如何一键部署上云?函数计算 x ModelScope 社区给出答案
    作者:魔搭官方大模型在过去一年多时间里的一路技术狂奔,深刻的改变了今天模型和AI的整体应用生态,也给开发者提供纷繁复杂的模型选择。在多样化大模型的背后,OpenAI得益于在领域的先发优势,其API接口今天也成为了业界的一个事实标准。许多开源工具和框架,包括LlamaIndex,LangChain......
  • 防抖-节流-库
    防抖函数和节流函数认识防抖debounce函数◼我们用一副图来理解一下它的过程:当事件触发时,相应的函数并不会立即触发,而是会等待一定的时间;当事件密集触发时,函数的触发会被频繁的推迟;只有等待了一段时间也没有事件触发,才会真正的执行响应函数;防抖的应用场景很多:➢输入......
  • U5函数
    Unit5函数1、函数的参数1.1、位置参数的使用defhappy_birthday(name,age):print("祝"+name+str(age)+"岁生日快乐")#调用happy_birthday("小明",18)1.2、关键字传参defhappy_birthday(name,age):print("祝"+name+str(age)+"岁生日......
  • 【C#基础面试题 09.如何在C#中定义和调用函数?】
    09.如何在C#中定义和调用函数?文章目录09.如何在C#中定义和调用函数?本文重点内容摘要一、回答重点二、扩展知识1.函数的定义2.函数的调用1)在类内部调用:2)在类外部调用总结结语本文重点内容摘要A.回答重点B.扩展知识一、回答重点定义方法:编写方法的签名,包括返......
  • JavaScript 函数定义
    JavaScript使用关键字 function 定义函数。函数可以通过声明定义,也可以是一个表达式。functionfunctionName(parameters){执行的代码}functionmyFunction(a,b){ returna*b;}函数表达式JavaScript函数可以通过一个表达式定义。函数表达式可以存储在变......