Question

我一直对此感到困惑，我甚至不确定这是可能的，但我还是去了。

如果我有一个增加存储在变量中的值的函数，我如何在函数外部获取变量？

例如，这不是很棒的代码，但我只是在玩耍。

function scrollVal() {
    var pos = 0;
    $(document).scroll(function() {
        pos = $(document).scrollTop();
        return pos;
    });
}
var scrollPos = scrollVal();
console.log(scrollPos);

在这样的事情失败后我尝试了以上

var pos = 0;
$(document).scroll(function() {
    pos = $(document).scrollTop();
});
console.log(pos);

我不知道如何神奇地更新变量。必须有一种方法。我试图使用该变量来操纵元素。实施例

var geometry = new FSS.Plane(1600, 835, pos, 15);

所以我的问题基本上是如何动态更改函数中的数字，然后在函数外部使用它以便我可以操作具有更改值的元素？

EDIT REWORD：我措辞不好这个问题，我的意思是它失败了，就是我无法在函数范围之外的函数范围内获取值。我希望在滚动发生到实例时传递增量值。

想象一下，您在页面上滚动，当您滚动某些内容或颜色发生变化时。我认为这应该很简单，它让我听起来像一个菜鸟，但我从来没有这样做，我不知道这里有什么规则适用，我理解为什么变量没有更新，但我不知道知道解决方案。

也许它无法更新实例中的值，但首先我需要获取该变量以实时呈现相应的数字，然后我就可以找到。

一个很好的基本示例是将变量附加到元素，并在页面滚动时观察该数字的增长。我以前见过这个，所以我知道它是可能的，这就是我喜欢的代码，如果你能想到它，很可能是它可能的，但这个解决方案并不是直截了当有一个警告！：）

如果我做了像

这样的事情，那么这又可以成为可能

var window.pos = 0;
$(document).scroll(function() {
    pos = $(document).scrollTop();
        $('.something').html(pos);
});

显然，这是通过在函数内部实现的，但由于我需要将它传递给一个实例，所以我不想一遍又一遍地执行它。

Answer 1

我想知道你的意思是什么'像这样失败了'，你写了这段代码：

var pos = 0;
$(document).scroll(function() {
    pos = $(document).scrollTop();
});
console.log(pos);

该代码将在控制台上记录0，因为它（1）声明变量pos，（2）将其值设置为0，（3）分配处理程序文档的滚动事件，然后（4）记录pos的值。无论何时滚动，事件处理程序都会触发，并更新pos的值。但你还没有告诉它什么都做。让我们告诉它记录pos的新值：

var pos = 0;
$(document).scroll(function() {
    pos = $(document).scrollTop();
    console.log(pos);
});

现在，当触发scroll事件时，您更改了pos的值，并看到它已记录。

附录1：

您在下面的评论中询问pos“是否应该在函数之外工作”，即函数外是pos吗？答案是pos在其范围内可用。例如，

function fun() {
    var pos = 0;
    $(document).scroll(function() {
        pos = $(document).scrollTop();
    });
}
alert(pos); // alerts 'undefined' (assuming you've not got another `pos` within this scope)

鉴于：

function fun() {
    var pos = 0;
    alert(pos);
    $(document).scroll(function() {
        pos = $(document).scrollTop();
    });
}
fun(); // alerts '0'

类似地：

function fun() {
    var pos = 0;
    function bun() {
        alert(pos);
    }
    bun();
}
fun(); // alerts '0'

但我怀疑这对你有多大帮助。也许这对你来说更有用： http://web.archive.org/web/20080209105120/http://blog.morrisjohns.com/javascript_closures_for_dummies 我希望你喜欢在JavaScript中掌握变量范围，它并不复杂，但在开始时可能会很棘手。

附录2：

听起来好像你的问题与参考/值的区别有关。在JavaScript中，整数（和其他原语，例如布尔值）实际上是通过值而不是引用传递的。听起来好像你希望通过更新pos的值来对你的FSS.plane实例产生一些影响。本附录旨在说明为什么不会发生这种情况，并说明它原则上如何。

假设我们有以下内容：

function Rectangle(x1, y1, x2, y2) {
    this.render = function() {
        // This would draw the plane, but for illustration we'll just use:
        alert(y1)
    }
}

function updatePos() {
    pos = $(document).scrollTop()
}

var pos = 0

var r = new Rectangle(0, pos, 0, 100)

// 'Render' the rectangle, every second
setTimeout(r.render, 1000)

// Update the value of pos according to scroll position
$(window).on('scroll', updatePos)

这将每分钟提醒0 60次。这是因为尽管pos发生了变化，但仍然在r内y1评估0：值0已传递给构造函数。

如果我们有了

// This time the constructor accepts two objects
function Rectangle(coord1, coord2) {
    this.render = function() {
        alert(coord1.y)
    }
}

function Coordinate(x, y) {
    this.x = x
    this.y = y
}

var point1 = new Coordinate(0, 100)
var point2 = new Coordinate(0, 100)

// Brief and not entirely unrelated intermezzo:
//   Notice that although 0 === 0 and 100 === 100
//   Still new point1 != point2

function updatePos() {
    point1.y = $(document).scrollTop()
}

var r = new Rectangle(point1, point2)

// The next two bits stay the same:

// 'Render' the rectangle, every second
setTimeout(r.render, 1000)

// Update the value of pos according to scroll position
$(window).on('scroll', updatePos)

此时间，如果用户向下滚动，则每分钟60分钟的消息将会更改。

以下内容将表现出相同的行为，而不会弄乱任何构造函数。

function Rectangle(x1, y1, x2, y2) {
    this.render = function() {
        alert(y1)
    }
    // New method, a setter for y1
    this.setY1(newValue) = function {
        y1 = newValue
    }
}

var r = new Rectangle(0, 0, 0, 100)

// We update the Rectangle instance directly
function updatePos() {
    r.setY1($(document).scrollTop())
}

setTimeout(r.render, 1000)
$(window).on('scroll', updatePos)

Answer 2

有关在全局范围内设置值的示例，请参阅 fiddle 。

<强>更新

要查看此更新的实例，请参阅 fiddle 。基本上，唯一的区别是每当滚动发生时值都会更新，但仍然在函数外部显示范围。

请注意var theTop = 0;如何在全局范围内设置，并且每次移动滚动条时都会更新var theTop = 0; function positionMiddle() { var $highlighted = $('.highlighted'); $highlighted.css({ left: ($(window).width() - $highlighted.outerWidth())/2, top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2 }); theTop = $highlighted.css('top'); } $(window).resize(function(){ positionMiddle(); }); $(window).scroll(function(){ positionMiddle(); }); $('#currentPosButton').click(function(){ $('.currentTop').text(theTop); }); // To initially run the function: positionMiddle();。单击该按钮时，它将更新为最新值。 Javascript代码是：

function scrollVal() {
    var pos = 0;
    $(document).scroll(function() {
        pos = $(document).scrollTop();
        return pos;
    });
}
var scrollPos = scrollVal();
console.log(scrollPos);

现在，关于你的方法不起作用的人：

pos

首先从滚动返回pos是不正确的。从处理程序返回值时，它是一个布尔值，用于指示事件是否应该传播。但是，主要问题是将在scroll函数中设置var pos = 0; $(document).scroll(function() { pos = $(document).scrollTop(); }); console.log(pos);，但这与scrollVal（）的结果无关。

对于第二个例子：

pos

这更接近，但仍然不太正确。滚动发生时将设置scope，但您在任何滚动完成之前立即记录。如果您按计时器间隔进行了登录，则在滚动时会看到pos更改的值。您希望阅读的有关更多内容的术语是closure和{{1}}。请参阅here和here。

Answer 3

我知道你可以为函数添加方法，使它们在函数之外可用这是一个例子。

Fiddle小提琴由于某种原因不起作用。（我知道我应该在学校加入乐队！）

增量部分很容易。

(Your Variable)++;

OR

(Your Variable)+1;

Answer 4

我之前误解了你的问题。我将再次尝试回答它。我只使用JS而不是我假设的jQuery来演示。

tl; dr - Javascript按值传递内容，但对象始终是引用。因此，您可以获得＆＃34;实时更新＆＃34;通过查看其引用而不是值的副本来实现效果。 Here's some more detail

我认为你想要的是这样的：

function scrollVal() {
  var res = {
    pos : 0
  };

  setTimeout(function() {
    res.pos = 10;
    return res.pos;
  }, 2000);

  return res;
}

var results = scrollVal();
console.warn(results.pos); // This could still be 0 at this point since our first setTimeout handler may have not run

setTimeout(function() {
  console.warn(results.pos); // Assuming this is executed after the first setTimeout, we should see a value of "10" printed
}, 2500);

可能不是完全你在寻找什么。这种精心设置的原因是因为Javascript按值而不是按引用传递结果。这意味着在执行后立即从您的函数版本返回值的精确副本。你永远不会看到这个＆＃34;实时更新＆＃34;再次，因为你有一个本地副本，而不是它的参考。

但是，要实现的是始终引用对象（意思是指向内存中的某个点的东西）。这意味着您将获得实际引用的副本，而不是该对象的深层副本。因此，当您引用此对象时，您将在其内存位置查找它，并且由于我们在初始超时功能中对其进行了修改，因此它似乎已经过实时更新。＆＃34;

编辑另外需要指出的是，在指定方案中使用pos的代码可能只是在寻找具有数字类型的值。它不能很好地处理对象，也不会理解它已被更新。真正实现这种行为的唯一方法是在检测到位置发生变化时（例如在滚动事件处理程序中）更新存储在geometry中的对象。

Answer 5

试试这个：

  var pos = 0;
  function scrollVal() {
    pos=0;
    $(document).scroll(function() {
      pos = $(document).scrollTop();    
   });
   return pos;
 }
var scrollPos = scrollVal();
console.log(scrollPos);

这可能会对你有帮助。

从函数中获取增量变量实时值？

5 个答案:

附录1：

附录2：