经典面试题--JS的防抖、节流

最新推荐文章于 2024-05-07 03:53:36 发布

Coder Ben

最新推荐文章于 2024-05-07 03:53:36 发布

阅读量456

点赞数 1

分类专栏： JavaScript 文章标签：防抖节流 javascript js 面试

本文链接：https://blog.csdn.net/qq846294282/article/details/95636900

版权

JavaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

直接附演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖与节流</title>
</head>
<body>
  <div>
      防抖：<input type="text" id="input1">&emsp;<span id="value1"></span>
  </div>
  <div>
      节流：<input type="text" id="input2">&emsp;<span id="value2"></span>
  </div>

<script>
  /************************
    防抖
    概念：函数触发后延迟一段时间再执行，如果在这期间又被触发，则重新计时
    常用场景：搜索框输入减少查询量（用户输入完，即无操作时调用接口，而不是每输入一个字符就调用接口）
  *************************/
  function debounce(func, delay) {
    return function() {
      const _this = this
      const _args = arguments
      clearTimeout(func.did)
      func.did = setTimeout(function() {
        func.call(_this, [..._args])
      }, delay)
    }
  }

  function handleInput1KeyUp(value) {
    const valueText = value.join()
    document.querySelector('#value1').innerText = valueText
  }

  const debounceHandleKeyUp = debounce(handleInput1KeyUp, 500)

  document.querySelector('#input1').addEventListener('keyup', function(e) {
    debounceHandleKeyUp(e.target.value, '参数2', '参数3')
  })


  /************************
    节流
    概念：一段时间内函数只触发一次
    常用场景：监听鼠标滚动事件，执行触底加载效果（滚动一段时间就调用一次接口，而不是滚动时一直调用接口，也不是像防抖那样，滚动结束后再调用接口）
  *************************/
  function throttle(func, delay) {
    let last;
    return function() {
      const _this = this
      const _args = arguments
      const now = +new Date()
      if (last && now < last + delay) {
        clearTimeout(func.tid)
        func.tid = setTimeout(function() {
          last = now
          func.call(_this, [..._args])
        }, delay)
      } else {
        last = now
        func.call(_this, [..._args])
      }
    }
  }

  function handleInput2KeyUp(val) {
    const valueText = val.join()
    document.querySelector('#value2').innerText = valueText
  }

  const throttleHanleInputKeyUp = throttle(handleInput2KeyUp, 500)

  document.querySelector('#input2').addEventListener('keyup', function(e) {
    throttleHanleInputKeyUp(e.target.value, '参数二', '参数三')
  })
</script>
</body>
</html>

Coder Ben

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
经典面试题--JS的防抖、节流

直接附演示代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫