JS：性能优化方案：lodash防抖debounce和节流throttle

/**
 * @param {function} func - 执行函数
 * @param {number} wait - 等待时间
 * @return {function}
 */
function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(func.bind(this),wait);
  }
}

let scrollHandler = debounce(function(e){
  console.log('scroll')
}, 500)
window.onscroll = scrollHandler

/**
 * @param {function} func - 执行函数
 * @param {number} delay - 延迟时间
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}

let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

npm i --save lodash

// 写法一：
methods: {
    // 注意function 不能省略
  debounceSubmit: debounce(function() {
  this.submit();
  }, 500)
},
// 写法二：
created(){
  this.debounceSubmit = debounce(this.submit, 500);
}

<div>
        <input type="text" id="keyword">
</div>
<script>
    function handleInput(e) {
        console.log(this);
        console.log('input：', e.target.value);
    }
    function debounce(func, wait) {
        let timer = null;
        return function (...args) {
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(func.bind(this, ...args), wait)
        }
    }
    let keyword = document.getElementById('keyword')
    keyword.addEventListener('input', debounce(handleInput, 500))
</script>

<div id="container"></div>
<style>
    #container {
        height: 200vh;
    }
</style>
<script>
    function handleScroll() {
        console.log('scrollTop:', document.body.scrollTop);
    }
    function throttle(func, wait) {
        let timer = null;
        return function (...args) {
            if (timer) {
                return;
            }
            timer = setTimeout(() => {
                func.call(this, ...args);
                timer = null;
            }, wait)
        }
    }
    document.addEventListener('scroll', throttle(handleScroll, 500))
</script>