首页 > 其他分享 >jquery随手做的一个滚动库 我称之为 idkScroll

jquery随手做的一个滚动库 我称之为 idkScroll

时间:2023-01-27 21:44:23浏览次数:40  
标签:jquery idkScroll 滚动 dontWait toTop node length limit total

/**
 * 仅做到底自动刷新功能
 * options: {
 *     page int 当前在第几页
 *     limit int 每页个数
 *     onBottom function 到底的回调
 *     whenEnd function 结束时的回调
 *     dontWait bool 不等待第一个回调执行完毕就可以执行第二个
 *     autoFull bool 是否在上一个回调执行完后自动定时再检测一次 这个与dontWait慎用
 *     delay int 上一个参数的时间(毫秒)
 *     toTop int 到元素下边框(不含)之前几像素就开始加载
 * }
 */
class idkScroll {
    constructor(node, { page = 0, limit = 10, onBottom = function () { }, whenEnd = function () { }, dontWait = false, autoFull = true, delay = 100, toTop = 0 } = {}) {
        if (node.constructor === String) {
            node = $(node).get(0);
        }
        this.node = node;

        this.length = page * limit;

        this.total = null;

        this.limit = limit;

        this.onBottom = onBottom;

        this.whenEnd = whenEnd;

        this.dontWait = dontWait;

        this.autoFull = autoFull;

        this.delay = delay;

        this.toTop = toTop;

        // 是否正在等待回复 当this.dontWait为true时忽略
        this.waitForReturn = false;

        // 默认执行一遍
        this.checkScroll();

        // 开启滚动检测
        $(document).scroll(this, this.checkScroll);
    }
    checkScroll() {
        // 合理运用表达式排序和短路来减少时间复杂度(省不了多少)
        // 只算实际高度+内边距
        if (
            // 没有加载完成为true 利用编程语言对或的短路来规避this.total没有值的情况
            (this.total == null || this.length < this.total) &&
            // 没有正在等待回应或开启了不等待模式为true
            (!this.waitForReturn || this.dontWait) &&
            // 窗口下边框之后this.toTop像素的高度大于等于元素下边框(不含)的高度为true
            $(document).scrollTop() + $(window).height() + this.toTop >= $(this.node).offset().top + $(this.node).innerHeight()
        ) {
            this.waitForReturn = true;
            this.onBottom(Math.ceil(this.length / this.limit) + 1, this.limit, this.node, this);
        }
    }
    // 回调的回调 代表加载完成,可以继续检测
    end(length, total) {
        if (!this.dontWait && !this.waitForReturn) {
            return;
        }

        this.total = total;

        this.length += length;

        this.waitForReturn = false;

        this.checkEnd();

        // 如果结束就不必再运行
        if (tthis.length < this.total && this.autoFull) {
            // 小心处理异步this,setTimeout里的this将会被替换为globalThis
            let that = this;
            setTimeout(function () {
                that.checkScroll.apply(that);
            }, this.delay);
        }
    }
    // 检查结束
    checkEnd() {
        if (this.length >= this.total) {
            // 停止检测
            $(document).off("scroll", this.checkScroll);

            // 运行结束函数
            this.whenEnd(this.node, this);
        }
    }
}

// 实例
// 传入两个参数
// 一个是css选择器或者网页元素
// 一个是options选项
let idkscroll = new idkScroll("body", {
    // 到元素的底部运行
    onBottom: function () {console.log("bottom", arguments); idkscroll.end(1, 1)},
	// 结束时运行
	whenEnd: function () {console.log("end", arguments);},
    // 每页两条数据
    limit: 2,
    // 窗口下边框之后toTop像素的高度大于等于元素下边框(不含)的高度就触发onBottom的函数
    toTop: $(window).height()
});
console.log(idkscroll);

发这篇博客大部分是表达我还没死

标签:jquery,idkScroll,滚动,dontWait,toTop,node,length,limit,total
From: https://www.cnblogs.com/dffxd/p/17069383.html

相关文章

  • JQuery样式操作
    获取样式:attr("class")设置样式:attr("class","myclass")追加样式:addClass("myclass")移除样式:removeClass("myclass")切换样式:toggleClass("myclass"),如果样式存在则去......
  • JQuery的remove方法的使用
    jquery的remove方法是将元素移除掉,并且返回被移除的元素,还可以使用,下面一个例子使用该功能实现下图的功能:<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><hea......
  • JQuery动态为表格(Table)添加和删除行
    <!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><scr......
  • jQuery学习
    1.概述    把原生动画封装到jquery库中    官网地址:https:/jquery.com/1.1JavaScript库        JavaScript库:即library,是一个封装好的特定的集合(方法......
  • Day - 03 JQuery及AJAX
    1.jquery介绍jQuery的定义jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery极大地简化了JavaScript编程。jQuery的作用jQuery和JavaScript......
  • jQuery练习4京东商品详情页面(放大镜效果)
    视频//11.当鼠标在中图上移动时,显示对应大图的附近部分区域functionbigImg(){var$mediumImg=$('#mediumImg')var$mask=$('#mask')//小黄块......
  • jQuery练习4京东商品详情页面(切换显示中图)
    视频//10.当鼠标悬停在某个小图上,在上方显示对应的中图functionmidumImg(){$('#icon_list>li').hover(function(){//获取到自己srcvarsrc=$(t......
  • jQuery练习4京东商品详情页面(移动小图片)
    视频functionmoveMiniImg(){var$as=$('#preview>h1>a')var$backward=$as.first();var$forward=$as.last();var$Ul=$('#icon_list')......
  • jQuery练习4京东商品详情页面(点击切换显示商品详情)
    视频//8.商品详情的切换显示functionproducts(){$('#product_detail>ul>li').click(function(){$(this).siblings().removeClass('current')//兄弟姐妹......
  • jQuery练习4京东商品详情页面(minicart显示隐藏)
    视频//7.鼠标移入移出切换显示迷你购物车functionminicart(){$('#minicart').hover(function(){$(this).addClass('minicart').children('div').show()......