首页 > 其他分享 >节流 频繁触发事件只执行一次 必须要等当前事件结束了 才能被再次触发

节流 频繁触发事件只执行一次 必须要等当前事件结束了 才能被再次触发

时间:2023-01-08 14:55:06浏览次数:36  
标签:触发 节流 timer let 事件 input null

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
</head>

<body>
  <input type="text" placeholder="鼠标反复经过我">
</body>
<script>
  // 节流主要运用于快速点击,鼠标滑动,鼠标滚轮滚动,下拉加载发请求等

  let timer = null
  let input = document.querySelector('input')
  input.addEventListener('mouseover', function () {
    if (timer != null) {
      return
    }

    timer = setTimeout(() => {
      console.log("节流")
      timer = null
    }, 500)

  })

</script>

</html>

标签:触发,节流,timer,let,事件,input,null
From: https://www.cnblogs.com/orangeczs/p/17034672.html

相关文章

  • 防抖就是在事件在同一时间内多次触发只执行最后一次 比如你设置1000毫秒定时,但是在500
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="widt......
  • 事件
    事件分为:冒泡事件、隧道事件、和直接事件隧道事件名称始终以Preview开头并首先引发。这使目标元素的父元素有机会在事件到达子元素之前看到它(因此有Preview前缀)。隧道预......
  • 防抖和节流
    //防抖函数和节流函数,使用方法antiShaking(()=>{//执行动作//})lettimer=null;//time用来控制......
  • 事件循环
    进程和线程进程:计算机运行的程序,操作系统管理程序的一种方式线程:运行调度的最小单位,被包含在进程中浏览器的事件循环1.JavaScript是单线程的,但JavaScript的线程应该......
  • Vue自定义事件原理
    自定义事件的基本用法<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-sca......
  • 防抖和节流
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docu......
  • Spring5 IOC容器解析——事件监听机制
    一、事件驱动模型简介事件驱动模型,也即是我们通常说的观察者。基于发布-订阅模式的编程模型。概念定义对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖......
  • iView Cascader 级联选择 on-change 事件用法
    一、用法<FormItemlabel="父级菜单"label-position="top"><Cascader@on-change="selec......
  • 【Kotlin 协程】协程中的多路复用技术 ② ( select 函数原型 | SelectClauseN 事件 |
    文章目录​​一、select函数原型​​​​二、Selectclause事件​​​​1、SelectClause0事件代码示例​​​​2、SelectClause2事件代码示例​​​​三、查看挂起函数......
  • javaScript-DOM-获取元素,事件基础,操作元素
    javaScript-DOM目录javaScript-DOM1.DOM简介1.1什么是DOM1.2DOM树2.获取元素2.1如何获取页面元素2.2根据ID获取2.3根据标签名获取2.4通过HTML5新增的方法......