首页 > 其他分享 >节流throttle函数

节流throttle函数

时间:2024-10-22 19:21:13浏览次数:1  
标签:触发 throttle 节流 按下 事件 函数

认识节流throttle函数

◼ 我们用一副图来理解一下节流的过程
    当事件触发时,会执行这个事件的响应函数;
    如果这个事件会被频繁触发,那么节流函数会按照一定的频率来执行函数;
    不管在这个中间有多少次触发这个事件,执行函数的频繁总是固定的;
节流的应用场景:
    ➢ 监听页面的滚动事件;
    ➢ 鼠标移动事件;
    ➢ 用户频繁点击按钮操作;
    ➢ 游戏中的一些设计;

案例:

    <button class="btn">按钮</button>  
  <script src="./js/underscore.js"></script>
  <script>
    const btnEl = document.querySelector(".btn")
    let index = 1
    btnEl.onclick =_.throttle(function(){
      console.log(`第${index++}次执行`)
    },1000)

节流函数的应用场景

◼ 很多人都玩过类似于飞机大战的游戏
◼ 在飞机大战的游戏中,我们按下空格会发射一个子弹:
  很多飞机大战的游戏中会有这样的设定,即使按下的频率非常快,子弹也会保持一定的频率来发射;
  比如1秒钟只能发射一次,即使用户在这1秒钟按下了10次,子弹会保持发射一颗的频率来发射;
  但是事件是触发了10次的,响应的函数只触发了一次;

标签:触发,throttle,节流,按下,事件,函数
From: https://www.cnblogs.com/hdc-web/p/18493573

相关文章

  • 防抖函数-手写(基本实现)
    <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函数可以通过一个表达式定义。函数表达式可以存储在变......
  • 欧拉函数
    欧拉函数通项\(\varphi(n)=n\prod\limits_{i=1}^n(1-\dfrac{1}{p_i})\)常用性质当\(n\)为质数时,\(\varphi(n)=n-1\)当\(gcd(n,m)=1\)时\(\varphi(nm)=\varphi(n)*\varphi(m)\)\(\varphi(p^k)=p^k-p^{k-1}\)欧拉反演\(n=\sum\limits_{d|n}\varph......
  • C语言使用指针作为函数参数,并利用函数嵌套求输入三个整数,将它们按大到小的顺序输出。(
    输入三个整数,要求从大到小的顺序向他们输出,用函数实现。   本代码使用到了指针和函数嵌套。   调用指针做函数ex,并嵌套调用指针函数exx在函数ex中。(代码在下面哦!)一、关于函数 ex  1. 这个函数接受三个指针参数 int*p1 、 int*p2 和 int*p3 ,分别指......