手写防抖节流&防抖节流的理解

防抖和节流都是性能优化的一种手段,减少高频事件的触发。防抖就是持续触发(事件)不执行,不触发的一段时间后才执行;节流就是持续触发也执行,只不过执行的频率变低了

手写防抖

防抖:一般用于 搜索框事件
防抖:根据用户输入的内容发请求

<!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" />
  <script>
    // 防抖:用户出发过于频繁 只要最后的一次事件操作
    let inp = document.querySelector("input")
    inp.oninput = debounce(function(){
      console.log(this.value);
    }, 500)

    function debounce(fn, delay) {
      let time = 0
      return function(){
        if (time !== 0) {
        clearTimeout(time)
      }
      time = setTimeout(()=>{
        fn.call(this)
      },delay)
      }
      
    }
  </script>
</body>

</html>

手写节流

节流:一般用于下拉事件
节流:获取窗口滚动的位置

<!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>
  <script>
    // 节流:控制执行次数
    // 节流的作用:控制高频事件执行次数
    window.onscroll = throttle(function(){
      console.log('千玺');
    },500)

    function throttle(fn, time) {
      let control = true
      return function () {
        if (control) {
          setTimeout(() => {
            fn.call(this)
            control = true
          }, time)
        }
        control = false
      }
    }
  </script>
</body>
<style>
  body {
    height: 20000px;
  }
</style>

</html>

你可能感兴趣的:(javascript,前端,开发语言)