setTimeout似乎被循环忽略

Question

So basically I have a set of codes that will find all of my categories. It will click on them and get everything under it as well.

    var Category = [];

var ID1;
var ID2;
var Level2CatsLen


var dispatchMouseEvent = function(target, var_args) {
    var e = document.createEvent("MouseEvents");
    e.initEvent.apply(e, Array.prototype.slice.call(arguments, 1));
    target.dispatchEvent(e);
}

var Level1Cats = document.getElementsByClassName("p-pstctgry-lnk-ctgry "); //GETTING LEVEL 1 CATS

var Level1CatsLen = Level1Cats.length; //GETTING LEVEL 1 CAT LEN

    function GoToLevel2(i) { //GO TO NEXT LEVEL!
    setTimeout(function() {
    dispatchMouseEvent(Level1Cats[i], "mouseover", true, true);
    dispatchMouseEvent(Level1Cats[i], "click", true, true);
    }, 3000);
    }


    function GetLevel2() { //GET NEXT LEVEL
    setTimeout(function() {    
    Level2Cats = document.getElementsByClassName("p-pstctgry-lnk-ctgry");
    console.log("Level1CatLen: "+Level1CatsLen);
    console.log("Level2CatLen: "+Level2CatsLen);
    var Level2CatsLen = Level2Cats.length }, 3000);

    };


for (i = 0; i <= Level1CatsLen-1; i++) {
console.log(Level1CatsLen);
    var ID1 = Level1Cats[i].id;
    var temp1 = Level1Cats[i].innerHTML;
    temp1.replace(/&amp;/gi, "&").replace(/<[^>]*>/gi, "");

    setTimeout(function() {GoToLevel2(i)}, 10000);
    setTimeout(function() {GetLevel2()},20000); //RUN IT WITH TIMING


    // END OF LEVEL 1
    var extracats2 = Level2CatsLen - Level1CatsLen;
    if (extracats2 !== 2 || extracats2 !== 0) {
        for (ii = 0; ii < extracats2; ii++) { //LEVEL 2
        ID2 = Level2Cats[ii+Level1CatsLen].id;
        var temp2 = Level2Cats[ii+Level1CatsLen].innerHTML;
        temp2.replace(/&amp;/, "&").replace(/<[^>]*>/gi, "");

var Level2Children = []; 
for (l = 0; l < level1CatsLen; l++) {
    Level2Children.push(Level2Cats[l].id);
} 

//DO SOMETHING WITH CATEGORIES - Level 1

Category.push({Name: temp1, ID: ID2, ParentID: 'null', ChildrenIDs: Level2Children});

//FINISH
        }}}

I have allocated setTimeouts twice just to play with stuff. But the issue I have is GoToLevel2 executes and then get category comes along and tries to get it straight away and naturally can't find anything. Though the setTimeout does not seem to have an effect. It slows the initial one and then after that is spams the console really quick for the amount of Level1Cats that are there. Any idea why?

Answer 1

Your variable i is global and is getting overridden more than you think probably. As well it is being being passed to GoToLevel2() later and with a different value than you think. I would change that first and see if the problem still exists.

function GoToLevel2(n) { //GO TO NEXT LEVEL!
  setTimeout(function() {
    dispatchMouseEvent(Level1Cats[n], "mouseover", true, true);
    dispatchMouseEvent(Level1Cats[n], "click", true, true);
  }, 3000);
}

// ...

for (var i = 0; i <= Level1CatsLen-1; i++) {
  // ...
  setTimeout(function() {GoToLevel2(i)}, 10000);
  // ...
}

Notice the var in the for loop, this limits the scope of i to the for -loop. As well I changed it to n in GoToLevel2(n) to prevent confusion for the reader (should not be necessary for the browser).

Answer 2

You are using loop counter ('i' var) in setTimeout , and when the code triggers after timeout value of i has already incremented. Following is the example of using setTimeout in loops.

for (var i=0; i < 10; i++)
{
    (
        function(i)
        {
            setTimeout(
                function()
                {
                    alert(i);
                }, 50
            );
        }
    )(i);
}