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

Loop of Waypoint, attribut undefined after quit loop

本文关键字：循环 属性 未定义 Waypoint 退出      更新时间：2024-06-18

需要一些路点的东西，我试着做一个循环，这可以帮助我正确地完成它

事实上，我的代码似乎很好，除了Waypoint在我滚动时不起作用之外。

btn选择&btn-transparent是css类，它帮助我向用户显示他在页面上的位置。

这是我的密码。

// 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都会工作，它会显示我在哪个页面，但如果我滚动，那么我就会出错）

感谢您的帮助

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

MDN有一篇关于闭包的不错的文章，可以作为一个起点。

在@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 ) );
};

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

相关文章：