return语句未退出for循环

Question

I want to hover over createJS labels and show english translation output only for the chinese label (Ex: "Wan" would show "Bowl") that I hover over.

1) So I add all my labels on create to an array

2) Then loop through all labels in hitTest() and add mouseover/mouseout handler to them

3) then handleMouseEvent() will call toggle english label on or off depending on hover

4) then toggleItemLabel() loops through all createJS containers containing that label... if the hovered Chinese word matches the label that belongs to the container, then it will set that second english label's input, and show it.

This works fine, except the toggleItemLabel() seems to continue looping through all labels in allMyLabels[] even after it has found a match and returned.

As you can see from the output, it's showing 4 outputs... which means it's not returning/exiting the loop when it finds a match.

Why is this?

Output:

Lee Xian Sheng, Lee Xian Sheng 
Lee Xian Sheng, Lee Xian Sheng 
Lee Xian Sheng, Lee Xian Sheng 
Lee Xian Sheng, Lee Xian Sheng 

function hitTest() {
    for (var i = 0 ; i < allMyLabels.length; ++i) {
        allMyLabels[i].on("mouseover", handleMouseEvent);
        allMyLabels[i].on("mouseout", handleMouseEvent);
    }
}

function handleMouseEvent(evt) {
    for (var i = 0 ; i < allMyLabels.length; ++i) {
        if (evt.type === "mouseover") { 
            toggleItemLabel(allMyLabels[i].text, false);        
        }
        else {
            toggleItemLabel(allMyLabels[i].text, true);
        }
    }
}

function toggleItemLabel(word, hide) {

    for (var i = 0; i < All_Items_Array.length; i++) {
        for (var j = 0; j < All_Items_Array[i].children.length; j++) {
            log(word + ", " + All_Items_Array[i].children[j].children[1].text);
            if (word === All_Items_Array[i].children[j].children[1].text) {
                if (hide) {
                    return All_Items_Array[i].children[j].children[2].text = "";
                }
                else {
                    return All_Items_Array[i].children[j].children[2].text = All_Items_Array[i].children[j].name;
                }
            }
        }
    }
    stage.update();
}

---

EDIT: to give some insight as to what is in All_Items_Array:

When a new item is created:

function createNewItem(itemObj) {
    if (itemObj.name != "undefined") {
        if (!checkIfExists(itemObj.name) || itemObj.quest_name == null) {       
            container = new createjs.Container();
            bitmap = new createjs.Bitmap(itemObj.path);
            container.x = itemObj.x;
            container.y = itemObj.y;
            container.name = itemObj.name;

            container.taskNum = 0;

            cn_label = new createjs.Text(itemObj.cn_name, "14px Arial", "white");   
            cn_label.y = -45;

            en_label = new createjs.Text("", "14px Arial", "black");    
            en_label.y = -25;           

            //loop through all labels, check hittest for each
            allMyLabels.push(cn_label);

            container.addChild(bitmap, cn_label, en_label);

            container.cn = itemObj.cn_name;

            if (itemObj.itemType === "newItem") {
                container.count = 0;
                ContainerOfItems.addChild(container);
            }
            else {
                container.questName = itemObj.quest_name;
                ContainerOfPeople.addChild(container)
            }       
        }
        else {
            log(itemObj.quest_name + " already added...");
        }
    }
    hitTest(); //add mouse listeners to newly added labels
    stage.update();
}

And All_Items_Array.push(ContainerOfPeople, ContainerOfItems);

---

EDIT 2 : tried break statements in the loop instead of returns:

Now when I hover over label, it returns english labels for all chinese labels:

The first console.log() outputs all items in array, regardless if word===label text or not. This is wrong. Hovering over wan should only return when wan === wan :

wǎn , Lee Xian Sheng 
wǎn , fàn 
wǎn , shūcài 
wǎn , wǎn  
text: bowl, result: bowl 

Updated toggleItemLabel() code:

function toggleItemLabel(word, hide) {
    var result = "", label = "";
    for (var i = 0; i < All_Items_Array.length; i++) {
        for (var j = 0; j < All_Items_Array[i].children.length; j++) {
            log(word + ", " + All_Items_Array[i].children[j].children[1].text);
            if (word === All_Items_Array[i].children[j].children[1].text) {
                label = All_Items_Array[i].children[j].children[2];
                if (hide) {
                    result = "";
                    break;
                }
                else {
                    result = All_Items_Array[i].children[j].name;
                    break;
                }
            }
        }
    }
    label.text = result;
    log("text: " + label.text + ", result: " +  result);
    return label;
}

Answer 1

I would rewrite that to look more like

function hitTest() {
    $(allMyLabels).on('mouseenter mouseleave', function(e) {
        var word = $(this).text, 
            hide = e.type == 'mouseenter';

        $.each(All_Items_Array, function(_, arr) {
            $.each(arr.children, function(_, child) {
                var w = child.children[1].text;
                log(word + ", " + w);
                if (word == w) {
                    child.children[1].text = hide ? child.name : '';
                }
            });
        });
    });
}