节流和防抖

最新推荐文章于 2024-09-06 11:32:57 发布

星卅~

最新推荐文章于 2024-09-06 11:32:57 发布

阅读量71

点赞数

文章标签：数学建模 javascript 开发语言

本文链接：https://blog.csdn.net/m0_67214567/article/details/130990849

版权

文章介绍了JavaScript中两种优化性能的技术——节流和防抖。节流通过限制函数在一定时间内的执行次数，防止过度频繁操作；防抖则是等待一段时间无新触发后才执行函数，避免资源浪费。示例代码分别展示了如何实现节流和防抖函数，并应用到按钮点击和输入框keyup事件中。

摘要由CSDN通过智能技术生成

节流：在一定时间内只执行一次操作，不重复执行操作。

<!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>Document</title>
  </head>
  <body>
    <button id="btn">点击</button>
  </body>
  <script>
    function thow(func, wait) {
      let timer
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            func()
            timer = null
          }, wait)
        }
      }
    }
    function handle() {
      console.log(Math.random())
    }
    document.getElementById('btn').onclick = thow(handle, 2000)
  </script>
</html>

防抖：触发事件后，等待一定时间（如1000毫秒）再执行函数，如果在等待时间内又触发了事件，则重新计时。

<!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>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
  </body>
  <script>
    const input = document.getElementById('input')
    function debounce(delay, calllback) {
      let timer
      return function (value) {
        clearTimeout(timer)
        timer = setTimeout(function () {
          calllback(value)
        }, delay)
      }
    }
    function fn(value) {
      console.log(value)
    }
    const debounces = debounce(1000, fn)
    input.addEventListener('keyup', function (e) {
      debounces(e.target.value)
    })
  </script>
</html>