节流、防抖

节流:

让事件函数隔一段时间触发一次。(应用场景:比如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)
posted @   真的想不出来  阅读(101)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示