JS 实现函数的防抖与节流

JS 实现函数的防抖

防抖和节流：限制函数执行的次数

防抖：通过 setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发

<input type="text" id ="ipt" value="123"/>
<input type="submit" id ="btn" value="提交"/>

<script>
  let ipt = document.querySelector('#ipt')
  let btn = document.querySelector('#btn')
  // 输入一个字符就发起一次请求
  // telInput.addEventListener('input', (e) => {
  //   console.log("发起请求")
  // })
	// btn.addEventListener('click', getValue)
  btn.addEventListener('click', debounce(getValue,2000))
  
  // 防抖封装
  function getValue(e){
    let val = ipt.value;
    console.log(val)
    console.log(this)
    console.log(e)
  }

  function debounce(fn,time) {
    var t = null		// 定义最开始的定时器
    return function(e) {
      if(t){	// 判断定时器是否生成，如果生成了，清楚上一个定时器
        clearTimeout(t)
      }
      var that = this
      var firstClick = !t
      // 如果是第一次点击立即执行
      if(firstClick) {
        fn.apply(that, arguments)
      }
      t = setTimeout(function(){
        t = null
      },time)
    }
  }
</script>

应用场景

• 登录、发验证码，等按钮用户点击太快，以及发送多次请求
• 调整浏览器窗口大小的时候，resize 次数过于频繁，造成计算过多，一次计算到位
• 搜索框搜索输入。

 JS 实现函数的节流

节流：减少一段时间的触发频率（时间戳），控制事件发生的频率，控制在 2s 发生一次。

<input type="text" id ="ipt" value="123"/>
<input type="submit" id ="btn" value="提交"/>

<script>
  let ipt = document.querySelector('#ipt')
  let btn = document.querySelector('#btn')
  btn.addEventListener('click', getValue)
  btn.addEventListener('click', throttle(getValue,2000))

  function getValue(e){
    let val = ipt.value;
    console.log(val)
  }

  function throttle(fn,time){
    var begin = 0
    return function(){
        // 拿到当前的时间戳
        var date = new Date().getTime()
        var that = this
        console.log(date-begin)
        if(date-begin > time){
            fn.apply(that, arguments)
            begin = date
        }
    }
  }
</script>

应用场景

• scroll ：每隔一秒计算一次位置信息
• 搜索框实时计算，并且发送请求，展示下拉列表，每隔两秒发送一次请求