防抖与节流

防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。假设函数持续多次执行，我们希望让它冷静下来再执行。也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。

<input type="text" id='input'>

function debounce(fn, time) {
    var timer = null;
    return function() {
      if(timer) clearTimeout(timer);
      timer = setTimeout(fn, time);
    }
  }
  function handle() {
    console.log('防抖了')
  }
  document.querySelector('#input').addEventListener('input', debounce(handle, 1000))

 

节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。什么叫有节制呢？就是在一段时间内，只执行一次。

同样，我们分解一下：

• 持续触发并不会执行多次
• 到一定时间再去执行

用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器

 

function throttle(func, delay) {
    let run = true
    return function () {
      if (!run) {
        return  // 如果开关关闭了，那就直接不执行下边的代码
      }
      run = false // 持续触发的话，run一直是false，就会停在上边的判断那里
      setTimeout(() => {
        func.apply(this, arguments)
        run = true // 定时器到时间之后，会把开关打开，我们的函数就会被执行
      }, delay)
    }
  }

 

参考资料： 

https://zhuanlan.zhihu.com/p/72923073?utm_source=wechat_session&utm_medium=social&utm_oi=659104391089491968

https://www.cnblogs.com/youma/p/10559331.html

 

遇到的问题：

1.onchange 与 oninput  propertychange的区别

即时搜索的方案：

（1）change事件    触发事件必须满足两个条件：

　　a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

　　b）当前对象失去焦点(onblur)

 

 （2）keypress  恩，还好。。。。。就是能监听键盘事件，鼠标复制黏贴操作他就无能为力的赶脚了。。。。。

 

 （3）propertychange（ie）和input事件

$("xxx").on(" input propertychange",function(){
  alert("变化了");
})

 

2. 开始时写的是 

input.oninput = function() {
    debounce(handle, 1000)
  };

导致半天触发不了。

function debounce(fn, time) {
    var timer = null;
    return function() {
      if(timer) clearTimeout(timer);
      timer = setTimeout(fn, time);
    }
  }
  function handle() {
    console.log('防抖了')
  }

  // input.addEventListener('input', debounce(handle, 1000))
  // input.oninput = debounce(handle, 1000)
  // input.oninput = (function() {
  //   return debounce(handle, 1000)
  // })()
  input.oninput = function() {
    debounce(handle, 1000)
  };