节流、防抖

时间:2021-07-28
本文章向大家介绍节流、防抖,主要包括节流、防抖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

节流:

让事件函数隔一段时间触发一次。(应用场景:比如onscroll等高频率触发的事件中)

  // 函数节流
  var canRun = true;
  var timer = null;
  document.onscroll = function () {
    if (!canRun) return; // 判断是否已空闲,如果在执行中,则直接return
    canRun = false;
    timer = setTimeout(function () {
      console.log("函数节流");
      canRun = true;
      clearTimeout(tiemr);
    }, 300);
  };

    //函数节流的封装使用 
    function throttling(fn, interval) {
      let canRun = true;
      let timer = null;
      return function () {
        let self = this,
        args = arguments;
        if (!canRun) return;
        canRun = false;
        timer = setTimeout(function () {
          canRun = true;
          fn.apply(self, args);
          clearTimeout(timer);
        }, interval);
      };
    };
    document.onscroll = throttling(() => {
      console.log("函数节流");
    }, 300);

防抖:

只执行最一次触发的函数。在一定时间内重复触发,之前的函数不被执行,只执行最后一次触发的函数。(应用场景:比如在输入账号密码的时候,不需要每输入一个字符就验证一下是否正确,当全部输入完成之后,再去匹配验证)

// 函数防抖
var timer = false;
document.onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码,重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};  

//防抖函数的封装使用   
function debounce(fn,delay) {
    let timer = null;
    return function () {
        let self = this,
            args = arguments;
        timer && clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(self,args);
        },delay);
    }
}

window.onscroll = debounce(function () {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动条位置:' + scrollTop);
},200)

原文地址:https://www.cnblogs.com/MrZhujl/p/15070973.html