Waypoint循环，退出循环后属性未定义

Question

需要一些 waypoints 的东西，我试图制作一个循环来帮助我正确地完成它。（我之前试过没有循环，但是想像 8 / 10 var，这不是很有趣）

实际上，我的代码似乎不错，除了 Waypoint 在我滚动时不起作用的事实。

btn-selected 和 btn-transparent 是 css class 这有助于我向用户显示他在页面上的位置。

这是我的代码。

// array of id, my left menu
var tableMenu = new Array("#left-menu-top", "#left-menu-evo-details", "#left-menu-details-accordeon", "#left-menu-awesome", "#left-menu-prog-rerun", "#left-menu-features", "#left-menu-timeline", "#left-menu-upgrade");
// array of id, content section
var tableSection = new Array("top", "evo-details", "details-accordeon", "awesome", "prog-rerun", "features", "timeline", "upgrade");
// waypoint object array
var WaypointArray = {};
// array of offset
var OffsetWaypointArray = new Array("-50", "55", "55", "55", "55", "55", "55", "0");

function clearAllButtons() {

    for(value in tableMenu) {
        $(tableMenu[value]).removeClass("btn-selected");
        $(tableMenu[value]).addClass("btn-tranparent");
    }
}

function replaceClass(idLeftMenu) {
    clearAllButtons();
    $(idLeftMenu).removeClass("btn-tranparent");
    $(idLeftMenu).addClass("btn-selected");
}

$(document).ready(function() {
    console.log('activated');
    for(var count=0; count < tableMenu.length; count++) {
        WaypointArray[count] = new Waypoint({
            element: document.getElementById(tableSection[count]),
            handler: function(direction) {
                clearAllButtons(),
                replaceClass(tableMenu[count]),
                console.log("you reached waypoint : "+tableSection[count]+" to : "+direction);
            },
            offset: OffsetWaypointArray[count]
        });
        console.log('counted '+count);
        //OffsetWaypointArray = {WaypointArray[count]};
    }

    //for(var count = 0; count < tableMenu.length; count++) {
    //  console.log(WaypointArray[count]);
    //}
});

滚动后，控制台日志给我。

activated
scripts.js:32 you reached waypoint : top to : down
scripts.js:36 counted 0
scripts.js:32 you reached waypoint : evo-details to : down
scripts.js:36 counted 1
scripts.js:36 counted 2
scripts.js:36 counted 3
scripts.js:36 counted 4
scripts.js:36 counted 5
scripts.js:36 counted 6
scripts.js:36 counted 7
2scripts.js:32 you reached waypoint : undefined to : down
scripts.js:32 you reached waypoint : undefined to : up
scripts.js:32 you reached waypoint : undefined to : down
scripts.js:32 you reached waypoint : undefined to : up
2scripts.js:32 you reached waypoint : undefined to : down
scripts.js:32 you reached waypoint : undefined to : up

看来退出循环后^，Waypoint不再定义了。（因为当我刷新页面时，无论我身在何处，Waypoint 都会工作，它会显示我在哪个页面，但如果我滚动，就会出现错误）

感谢您的帮助

Answer 1

这是JavaScript中的经典闭包问题。当异步 handler 函数稍后获得运行时，您用于循环的 count 变量不会以其当前值被捕获。换句话说，仅仅因为 count 在您创建航路点时为 4 并不意味着它在执行时的值为 4。在您的示例中，当所有处理程序都执行并且您的数组在索引 8 处没有任何内容时，count 将为 8。

MDN 有一个 decent article on closures 可能有助于作为一个起点。

Answer 2

受@imakewebthings的启发，我解决了类似的问题：

// create a function as the "environment", provide the needed parameter to it, return the waypoint object, this will ensure, when the action is completed, it will return the result one by one later in the loop.

function createWayPoint( eleID, index ){
  return new Waypoint({
    element: document.getElementById( eleID ),
    handler: function(direction) {
      hightlight( index );
    }
  });
};

window["wp"] = []; // putting it in global object for testing purpose
for( var i = 0; i < $("#floor-navigator li").length; i++ ){
   createWayPoint( "floor" + (i + 1).toString(), i )
   console.log(i);

   // store it one by one and you can see, they are successfully created
   window["wp"].push( createWayPoint( "floor" + (i + 1).toString(), i ) );
};

非常感谢，希望这可以帮助其他有类似困难的人。

Waypoint循环，退出循环后属性未定义

Loop of Waypoint, attribut undefined after quit loop

javascript

jquery

jquery-waypoints