js防抖和节流的区别

~西门吹雪~~

已于 2022-10-17 21:34:20 修改

阅读量150

点赞数

文章标签： javascript 前端

于 2022-10-17 21:32:50 首次发布

本文链接：https://blog.csdn.net/weixin_43432286/article/details/127377505

版权

防抖是触发间隔大于timer才会触发；节流是在一定的时间间隔内只触发一次

<!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" class="input"  placeholder="请输入价格">
</body>
</html>
<script> 
  // 防抖 =》 将多次操作合并成一次
  function debounce (fn, wait) {
    let timer = null
    return function () {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        console.log(this)
        fn.apply(this, arguments)
      }, wait)
    }
  }
  function queryData (e) {
    console.log('发起请求', e?.target.value)
  } 
  let el = document.getElementsByClassName('input')[0]
  el.addEventListener('input', debounce(function (e) {
    console.log(this)
    queryData(e)
  }, 2000))
</script>