javascript的防抖、节流以及应用场景

定义与应用场景

防抖： 规定时间内没有再次触发，才能真正触发成功，若在规定时间内再次触发了则不能触发成功并且重新计时，将一段时间内连续的多次触发转化为一次触发。

情景：页面resize事件，页面适配时，根据最终呈现的页面情况进行dom渲染，一般使用防抖，只需判断最后一次的变化情况；search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

节流： 持续触发时，保证规定时间间隔内触发一次。

情景：一般是onrize，onscroll等这些频繁触发的函数，如获取滚动条的位置，然后执行下一步动作；鼠标不断点击触发，mousedown(单位时间内只触发一次)；搜索框input事件，例如要支持输入实时搜索可以使用节流方案

实现方法

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    var timeout;
 
    return function () {
        var context = this;
        var args = arguments;
 
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

const throttle = (func, wait, ...args) => {
  let timeout;
  return function(){
    const context = this;
    if(!timeout){
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context,args);
      },wait)
    }
  }
}

代码参考博客：https://blog.csdn.net/weixin_39939012/article/details/101211869

表格滚动加载
不会出现频繁加载以及上滑加载的情况
引自 https://juejin.cn/post/6844903984616996871

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper');
    selectWrap.addEventListener('scroll', function () {
      if (this.scrollHeight - this.scrollTop <= this.clientHeight) {
        binding.value();
      }
  }
})