美文网首页技术专栏
JS事件截流 / 防抖

JS事件截流 / 防抖

作者: ErrorCode233 | 来源:发表于2018-07-19 11:51 被阅读22次

JS事件截流

在使用scroll,resize,mousemove等方法的时候,由于触发次数过于频繁,一般会使用一个节流的方法来实现方法的调用

//首先定义一个全局函数
let timeOutId = null;
//定义一个延时定制器的回掉函数
function callBack(){
    const top = warpper.getBoundingClientRect().top;
    if(top && top < winHeight){
        loadMoreFn();
    }
}
//scroll方法
window.addEventListener('scroll',()=>{
    // 如果isLoadingMore = true 那么不做处理

    //如果timeOutId被赋值了,那么就清理掉延迟定时器
    if(timeOutId){
        clearTimeout(timeOutId);
    }

    //回调函数延迟50毫秒触发
    timeOutId = setTimeout(callBack,50);
},false);


使用这种方法可以减少scroll事件不必要的触发函数,是一个很好的节省页面性能的方法

相关文章

  • JS事件截流 / 防抖

    JS事件截流 在使用scroll,resize,mousemove等方法的时候,由于触发次数过于频繁,一般会使用一...

  • 面试过程中遇到的问题记录

    1.js的防抖和节流 函数防抖 函数防抖原理(debounce):当持续触发事件时,一定时间段内没有再触发事件,事...

  • JS函数防抖

    JS 中的函数防抖 一、什么是函数防抖? 概念: 函数防抖(debounce), 就是指触发事件后,在 n 秒内函...

  • [JavaScript] 函数节流(throttle)和函数防抖

    js 的函数节流(throttle)和函数防抖(debounce)概述 函数防抖(debounce) 一个事件频繁...

  • 2020-04-28

    #JS中的防抖和节流 1、防抖 对于短时间内连续触发的事件(上面的滚动事件),防抖的含义就是让某个时间期限(如上面...

  • 防抖与截流

  • 防抖和截流

    固定时间段内的多次触发将被重置为单次触发,防抖就是禁止频繁触发,例如:浏览器滑动,触发频率大约是1次/16ms(刷...

  • 防抖和截流

    由来 如果短时间以很高频率触发 scroll 、resize、click 等事件(事件中涉及到大量的位置计算、DO...

  • js的防抖和节流

    js的 防抖(debounce)和 节流(throttle ) 防抖和节流一般用于高频触发事件,属于浏览器性能优化...

  • JS专题系列之防抖与截流

    一、前言 在前端开发中会遇到一些频繁的事件触发,比如:window 的 resize、scrollmousedow...

网友评论

    本文标题:JS事件截流 / 防抖

    本文链接:https://www.haomeiwen.com/subject/hittmftx.html