js_防抖与节流(闭包的使用)

简介: js_防抖与节流(闭包的使用)

防抖事件

定义:持续触发事件,一定时间内没有触发事件,事件处理函数只会执行一次,

当设定的时间内触发过一次事件后会重新开始延时。

例:输入框的事件(2s显示内容,不是实时刷新显示内容),对比输入框的内容事件。

实时刷新的效果

<div class="container">
      <div class="left">
        <p>实时刷新显示内容</p>
        <input type="text" id="leftInput" />
        <div class='textDiv' id="textShow"></div>
      </div>
      
      <div class="right"></div>
    </div>
    <script>
      var inputDom=document.getElementById('leftInput');
      inputDom.addEventListener('keyup',function(e){
        var textDom=document.getElementById('textShow');
        console.log(e.target.value);
        textDom.innerText=e.target.value;
      })  
    </script>

输入123456会依次打印123456的金字塔

防抖(1s内显示输入内容)

<div class="container">
      <div class="left">
        <p>防抖(1s内显示输入内容)</p>
        <input type="text" id="leftInput" />
        <div class='textDiv' id="textShow"></div>
      </div>
      
      <div class="right"></div>
    </div>
    <script>
      // 防抖
      var inputDom = document.getElementById('leftInput');
      // 函数柯里化
      function debounce(delay, callback) {
        let timer
        return function(value) {
          //闭包内存泄漏
          clearTimeout(timer)
          timer = setTimeout(function() {
            //执行
            callback(value)
          }, delay)
        }
      }
      // 显示内容的函数
      function showText(value) {
        var textDom = document.getElementById('textShow');
        console.log(value)
        textDom.innerText = value;
      }
      var debounceFunc = debounce(1000, showText);
      inputDom.addEventListener('keyup', function(e) {
        let value = e.target.value
        debounceFunc(value)
      })
    </script>

1s内输入123456只会打印一次123456

节流事件

定义:一段时间直只调用一次事件处理函数

实际用例:提交事件 、游戏的技能cd(在游戏cd中点击n次都不会发动技能)

// 节流
      var skillDom = document.getElementById('skillTriger');
      function throttle(wait,callback) {
        let timeOut;
        return function(value) {
          if (!timeOut) {
            timeOut = setTimeout(function() {
              callback(value);
              //执行一次,时间段内的都不知执行
              timeOut = null;
            }, wait)
          }
        }
      }
      function skillEvent(value){
        var textDom = document.getElementById('skillEventId');
        console.log(value)
        ++count
        textDom.innerText = value+count;
      }
      var skillAc=throttle(3000,skillEvent)
      var count=0
      skillDom.addEventListener('click', function(e) {
        let value = e.target.value
        skillAc(value)
      })

完整的html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>防抖与节流</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 400px;
      background: #262626;
      display: flex;
    }
    .left {
      position: relative;
      width: 50%;
      height: 100%;
      background: #00cec9;
      box-sizing: border-box;
      overflow: hidden;
    }
    .right {
      position: relative;
      width: 50%;
      height: 100%;
      background: #b2bec3;
    }
  </style>
  <body>
    <div class="container">
      <div class="left">
        <p>防抖(1s内显示输入内容)</p>
        <input type="text" id="leftInput" />
        <div class='textDiv' id="textShow"></div>
      </div>
      <div class="right">
        <p>节流(3s内触发一次)</p>
        <input type="submit" id="skillTriger" value="发动技能" />
        <div class='skillEvent' id="skillEventId"></div>
      </div>
    </div>
    <script>
      // 防抖
      var inputDom = document.getElementById('leftInput');
      // 函数柯里化
      function debounce(delay, callback) {
        let timer
        return function(value) {
          //闭包内存泄漏
          clearTimeout(timer)
          timer = setTimeout(function() {
            //执行
            callback(value)
          }, delay)
        }
      }
      // 显示内容的函数
      function showText(value) {
        var textDom = document.getElementById('textShow');
        console.log(value)
        textDom.innerText = value;
      }
      var debounceFunc = debounce(1000, showText);
      inputDom.addEventListener('keyup', function(e) {
        let value = e.target.value
        debounceFunc(value)
      })
      // 节流
      var skillDom = document.getElementById('skillTriger');
      function throttle(wait, callback) {
        let timeOut;
        return function(value) {
          if (!timeOut) {
            timeOut = setTimeout(function() {
              callback(value);
              //执行一次,时间段内的都不知执行
              timeOut = null;
            }, wait)
          }
        }
      }
      function skillEvent(value) {
        var textDom = document.getElementById('skillEventId');
        console.log(value)
          ++count
        textDom.innerText = value + count;
      }
      var skillAc = throttle(3000, skillEvent)
      var count = 0
      skillDom.addEventListener('click', function(e) {
        let value = e.target.value
        skillAc(value)
      })
    </script>
  </body>
</html>


目录
相关文章
|
6天前
|
JavaScript 前端开发 UED
深入理解JavaScript中的节流与防抖技术
理解并合理运用节流与防抖技术,可以帮助我们优化事件处理函数的执行频率,从而提升应用的性能和用户体验。这两种技术通过减少不必要的计算和DOM操作,使得Web应用程序能够更加流畅地运行。 通过掌握防抖和节流的实现原理及应用场景,开发者可以更加灵活地编写高效且性能优化的代码,对于面对高频事件处理时尤其重要。在开发中合理选择使用防抖或节流,将直接影响到应用的响应性和效率。
11 1
|
1月前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
16小时前
|
缓存 前端开发 JavaScript
【JavaScript】JavaScript 中的闭包:从入门到精通
【JavaScript】JavaScript 中的闭包:从入门到精通
7 0
|
18小时前
|
前端开发 JavaScript Java
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
【JavaScript】JavaScript 防抖与节流:以游戏智慧解锁实战奥秘
7 3
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包基础
JavaScript闭包基础
|
1月前
|
缓存 自然语言处理 JavaScript
JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当
【5月更文挑战第14天】JavaScript内存泄漏导致应用性能下降,常见于闭包使用不当。闭包能记住并访问词法作用域,若函数返回后,其引用的对象未被释放,就会引发泄漏。例如,`createLeakyFunction`创建的闭包保留了对大型对象`someLargeObject`的引用,即使函数执行完毕,对象也无法被垃圾回收。避免泄漏的方法包括及时解除引用、清除事件监听器、使用WeakMap和WeakSet以及定期清理缓存。使用性能分析工具可检测和修复内存泄漏问题。
26 3
|
1月前
|
JavaScript 前端开发
JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束
【5月更文挑战第13天】JavaScript闭包允许内部函数访问并保留外部函数的变量,即使外部函数执行结束。在游戏开发中,闭包常用于创建独立状态的角色实例。例如,`createCharacter`函数生成角色,内部函数(如`getHealth`、`setHealth`)形成闭包,保存角色的属性(如生命值)。这样,每个角色实例都有自己的变量副本,不互相影响,从而实现角色系统的独立性。
26 0
|
1月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包机制
闭包是JavaScript中一个重要且常被误解的概念。本文将深入探讨闭包的本质、工作原理以及在实际开发中的应用。通过详细解析闭包的定义、作用域链、内存管理等方面,读者将对闭包有更清晰的理解,并能够运用闭包解决实际开发中的问题。
|
1月前
|
前端开发 JavaScript
闭包在JavaScript中有许多应用场景
【5月更文挑战第7天】闭包在JavaScript中发挥关键作用,如封装私有变量和函数提升安全性,维护变量生命周期,实现高阶函数,模拟块级作用域,支持回调函数以处理异步操作,以及促进模块化编程,增强代码组织和管理。闭包是理解和掌握JavaScript高级特性的重要一环。
32 7
|
1月前
|
JavaScript 前端开发 UED
js的防抖节流
js的防抖节流
16 1