Javascript 如何使用模块模式检索文档数据?

Javascript 如何使用模块模式检索文档数据?,javascript,Javascript,我正在用我认为是模块模式的方式编写javascript(我对编程还是很陌生,所以请原谅我使用了不正确的术语) 下面的脚本用于在加载文档时度量三个方面: 页面滚动的距离 相对于文档顶部的#eventSideBar的y偏移量 文档的总高度 将这些记录到控制台时,唯一一致正确返回的值(在Chrome中测试)是sideBarOffset。而scrollDistance始终返回0,allHeight的变化+/-约为1000px 如果我将exocet.init更改为以下内容: exocet.init =

我正在用我认为是模块模式的方式编写javascript(我对编程还是很陌生,所以请原谅我使用了不正确的术语)

下面的脚本用于在加载文档时度量三个方面:

  • 页面滚动的距离
  • 相对于文档顶部的
    #eventSideBar
    的y偏移量
  • 文档的总高度

  • 将这些记录到控制台时,唯一一致正确返回的值(在Chrome中测试)是
    sideBarOffset
    。而
    scrollDistance
    始终返回0,
    allHeight
    的变化+/-约为1000px

    如果我将
    exocet.init
    更改为以下内容:

    exocet.init = function() {
        console.log('Scroll distance: ' + scrollDistance() +
                    ' Sidebar offset: ' + sideBarOffset() +
                    ' Total height: ' + allHeight()
        );
        $(document).scroll(function(){
            console.log('Scroll is now: ' + scrollDistance());
        });
    };
    
    然后我总是得到正确的滚动位置值。这得到了正确的结果,但似乎有点不切实际


    是否有一种“正确”的方法来获取我要的数据,而不必像我的方法中那样链接
    文档
    方法?

    听起来你需要的是:

    $(document).scroll(function() { exocet.init(); });
    

    把它放进你的备用电话里。当用户滚动时,必须记录结果。必须按“刷新”没有多大意义。

    @beautifulcoder的示例将在每次文档滚动时都有效。如果您只想在页面加载时显示滚动位置(即,如果之前在页面上保存了滚动位置),则可以将
    exocet.init()
    函数放入
    load
    事件处理程序中,并在短时间内超时以捕获该初始滚动位置:

        $(window).on('load', function() {
            setTimeout(function() {
                exocet.init();
            }, 200);
        });
    
    如果两者都需要,那么也可以使用
    滚动
    事件处理程序


    修改示例。

    当您从
    $(window.load()
    )调用
    exocet.init()时会发生什么?@Malk类似的结果-在第一种情况下似乎是相同的。在第二种情况下,scrollDistance大约有四分之一的时间是0。看起来它在我这边起作用了。文档设置如何?您希望得到什么结果?@davidachley在您的示例中,无论页面滚动多远,我每次都会得到“滚动距离:200”。比如说,如果页面滚动了450px,然后刷新了-我希望记录“滚动距离:450”。@Malk感谢您批准我的代码,但是结果太不可靠,不能认为它是好的。beautifulcoder提出的答案似乎产生了预期的效果。我觉得奇怪的是,一旦加载文档,期望测量文档的滚动位置是一种不合理的期望-您能详细说明原因吗?为什么
    setTimeout()
    ?加载
    事件不会等待保存的任何初始滚动位置被滚动到。因此,超时给了我们一些等待滚动发生的余地,以便我们得到准确的读数。那么“这就是”OP的要求?非常非常不清楚的问题,如果是这样的话。我看不到刷新后的滚动问题。我想问的是,一旦加载文档,如何可靠、正确地检索文档的滚动位置。这可能发生在页面刷新之后;我之所以提到这一点,是因为它很容易调用。如果我的问题中没有明确说明这一点,我表示歉意——我认为目标清单和随后的结果足够清楚地表达了我的意图——也许没有。在任何情况下,由于页面加载固有的可变性,设置时间间隔都不能解决问题。这确实有效,谢谢。按refresh确实毫无意义——这纯粹是一个例子。看起来我现在必须重新考虑我的代码逻辑,因为我没有预料到init函数在每个会话中运行超过一次。
    
        $(window).on('load', function() {
            setTimeout(function() {
                exocet.init();
            }, 200);
        });