Jump to content

Could someone take a stab at why this inline function is running 3 times?


Spunky

Recommended Posts

I have the following code:

$scope.clickLinks = function(initialOut,initialIn,backIn,backOut,name){    alert('click');    var $map = $('.'+initialOut+'Map');    $map.stop().fadeOut('slow',function(){        $('.'+initialOut+'Details,.bkbtn'+backOut).css("display","none");        $('.'+initialIn+'Details,.bkbtn'+backIn).css("display","block");        $('.noQuery').css("display","none");        $("#buildingHeader").html(name);        $('.'+initialIn+'Map').fadeIn('slow').css("display","block");        stackMapOut.push(initialIn);        stackMapIn.push(initialOut);        stackBack.push(backIn);        stackName.push(name);        console.log('stack:'+ stackMapOut + 'stack:'+stackMapIn + 'stack:'+ stackBack + 'stack:'+stackName);        alert("hello?");    });};

It is the inner function for .fadeOut that is running 3 times. The alert 'click' only appears once but the alert 'hello?' appears 3 times and the console.log is stacking 3 extra times. But only with certain links. Far as I know all links should be doing the same thing.

 

Here is the HTML that runs the clickLinks function:

<div ng-repeat="x in numOfMaps" class="{{x.count}}Details">     <li ng-repeat="y in this[x.count + 'Info']" class="{{y.linkclass}}"><a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</a>         <hr class="m4Details" ng-if="$index==1">     </li></div>

All that is important is that ng-click, but it is important to know this is powered by Angular. So every link on the page is ideally being displayed and functioning the same. But for some reason they are not. This link is functioning fine:

$scope.m3Info=[{    	name:"Link doesn't run function",    	link:"EDWARD/LINDEN/MAIN"+$scope.discipline,    	icon:$scope.iconImage,    },{    	name:"Link does run function",    	link:"#",    	icon:$scope.iconImage,                initialOut:"m3",        initialIn:"m9",        backIn:"Linden",        backOut:"Home",    }];

Notice that the initialOut, initialIn, backIn, backOut, and name are what is being sent through through the parameters for the clickLinks function

 

This group of links all cause that .fadeOut function within clickLinks function to run 3 times:

$scope.m2Info=[{        name:"Name1",        link:"#",        icon:$scope.iconImage,                initialOut:"m2",        initialIn:"m5",        backIn:"Edward",        backOut:"Home",    },{    	name:"Name2",    	link:"#",    	icon:$scope.iconImage,                initialOut:"m2",        initialIn:"m6",        backIn:"Edward",        backOut:"Home",    },{    	name:"Name3",    	link:"#",        icon:$scope.iconImage,                initialOut:"m2",        initialIn:"m7",        backIn:"Edward",        backOut:"Home",    },{    	name:"Name4",    	link:"#",        icon:$scope.iconImage,                initialOut:"m2",        initialIn:"m8",        backIn:"Edward",        backOut:"Home",    }];

Nothing different really. In either case, those links are made visible from m1 where you can go to either m2 or m3 which makes the related links clickable.

 

Here is a Plunker: http://plnkr.co/edit/xm57jdaUqthSYXc9p08D?p=preview That represents what I am attempting. Before I added the .stop to the code and the :animated bit to the code, if you clicked multiple times on either the links or the back button it would not function correctly. Though with the :animated bit I wonder if .stop is even doing anything anymore.

Link to comment
Share on other sites

Omg yes thank you. I was still staring at this code and like HOW when there is only one map showing at a time! But sure enough when I alerted $map.length it came up 1 for the link that works fine and 3 for the one that did not which did NOT make any sense. But then it finally clicked. I gave a couple of other elements the same class so that they would fade in and out with the map to avoid having to add any additional code. Looks like I will need another solution for that, easy enough. Thank you!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...