函数防抖

在监听一些事件(如 oninput, onresize)的时候不希望一直触发，就想在操作完成(输入完毕、resize完毕)之后执行一次方法，这时可以使用 setTimeout 来进行防抖控制

  1. <input type="text" oninput="onInput(this)">
  1. var timer = null
  2. function onInput(e) {
  3.     clearTimeout(timer);
  4.   timer = setTimeout(function(){
  5.     console.log(e.value);
  6.   }, 1000)
  7. }

函数节流

节流是让函数在特定时间内只执行一次

  1. var canRun = true;
  2. document.getElementById("app").onscroll = function(){
  3.   if(!canRun) return;
  4.   canRun = false
  5.   setTimeout( function () {
  6.     console.log("函数节流")
  7.     canRun = true;
  8.   }, 1000)
  9. }

函数防抖和节流都是防止函数重复高频执行，
区别：

  • 防抖是在特定时间内函数不再重复调用后执行
  • 节流是在特定时间内函数只执行一次