“静态”变量保持元件失去价值答案

【问题标题】："Static" variable holding holding element loses value“静态”变量保持元件失去价值
【发布时间】：2014-02-08 00:32:11
【问题描述】：

所以我正在尝试为元素滚动条创建一个“软自动滚动”功能，基本上它的意思是被调用然后为你滚动一个元素。但是，正如您在下面的代码中看到的那样，我将该函数封装在一个自调用函数中，该函数将元素保存在“元素”中。但是，当它第一次从else if (pos>element.scrollHeight) 行中的返回函数中读取变量时，元素将返回为null

'use strict';
window.onload=(function() 
{
    window.scrollTo=(function()
    {
        var element=document.getElementById('more_info'),
            ease=function(pos)
            {
                var diff=(pos-element.scrollTop).
                    increment=(diff / Math.abs(diff));

                if (Math.abs(diff)<1)
                {
                    element.scrollTop=pos;
                    return;
                }

                else if (Math.abs(diff)<30)
                {
                    element.scrollTop+=1-(increment / diff);
                }

                else 
                {
                    element.scrollTop+=increment*10;
                }

                window.setTimeout(ease,1000 / 10);
            };
        return function(pos)
        {
            if (pos<0) {pos=0;}
            else if (pos>element.scrollHeight) {pos=element.scrollHeight;}
            ease(pos);
        };
    }());
}());

我更新了代码，以便在文档加载后调用它，但是我的调试器似乎显示在 window.onload 之前仍然调用了 var 元素

【问题讨论】：

你能发布一个小提琴来重现这个问题吗？
您知道代码执行时元素已经存在吗？当您将所有这些封装到就绪/加载事件中时，它应该可以工作
“元素返回为null”是什么意思？ element 变量的值在那个地方是空的？您分配给window.scrollTo 的函数不返回任何值。此外，您可能忘记在最后的通话中将pos 传递给ease。
是的，哎呀，我在<head>中调用脚本
或总是重新查询return function () { element = document.getElementById('more_info'); /*...*/ }; 中的元素，将var element, 留在外部范围内

标签： javascript element

【解决方案1】：

您正在立即执行 onload 函数。

window.onload = (function () {
  ...
}());

这使得函数执行然后将返回的值分配为onload 处理程序。这意味着它在 DOM 准备好之前执行。更改它以删除自执行。

window.onload = function () {
  ...
};

【讨论】：

哦，天哪...我已经玩了太久了，非常感谢！
喝咖啡休息时间！