Javascript function hangs my browser?

Question

0.00/5 (No votes)

See more:

Hi I have followin script in my page to highlight the map dynamically.It's gives result but after loading the page, all my browser get sucked, or infinitely hanged.

JavaScript

<script>
       function highlight(list) {

           var jsVariable = list;
           var area = document.getElementsByTagName('area')
           var ary = []
           for (var zxc0 = 0; zxc0 < area.length; zxc0++) {
               ary.push(area);
           }
           var isfound = false;
           for (var i = 0; i < area.length; i++) {
               isfound = false;
               for (var j = 0; j < jsVariable.length; j++) {
                   var SpliData = jsVariable[i].trim().split(":");
                   if (area[i].getAttribute('title').trim() == SpliData[0].trim()) {
                       isfound = true;
                       $(area[i]).each(function ()//get all areas
                       {
                           $(this).addClass('Highlight_' + i)
                           var data = {};
                           $('.map').maphilight();
                           data.alwaysOn = true;
                           data.fillColor = SpliData[1];
                           $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                       });
                   }
                   if (!isfound) {
                       $(area[i]).each(function ()//get all areas
                       {
                           $(this).addClass("NoHighLight");
                       });
                   }
               }
           }
       }
   </script>

</pre>
What should be the reason for that?

FYU, The browser starts to hang after adding the following part

JavaScript

$('.map').maphilight();
data.alwaysOn = true;
data.fillColor = SpliData[1];
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');

Since this part is used to highlight the map dynamically.

Please help me out.

Posted 20-Jul-14 23:48pm

VigneshKumar957

Updated 20-Jul-14 23:49pm

v2

Add a Solution

2 solutions

Solution 1

this resulting in never ending recursion.
use e.stopPropagation();
This would prevent triggered event to propagate

Posted 21-Jul-14 0:09am

mcdubey

Updated 21-Jul-14 0:11am

v2

Comments

VigneshKumar957 21-Jul-14 6:20am

Can you please explain with example.I'm new to this

mcdubey 21-Jul-14 6:51am

what are you trying to do on that line?
please go through this link

http://stackoverflow.com/questions/8745253/jquery-maphilight-using-onclick-method

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

VigneshKumar957 · Accepted Answer · 2014-07-21T21:58:00

Change your script as follows:

Since your SplitData using **I** variable instead of **j** variable. Also use RemoveClass method before Adding Classes. This may made your function recursively.

C#

<script>
        function highlight(list) {
            var jsVariable = list;
            var area = document.getElementsByTagName('area')
            var ary = []
            for (var zxc0 = 0; zxc0 < area.length; zxc0++) {
                ary.push(area);
            }

            var isfound = false;

            for (var i = 0; i < area.length; i++) {
                isfound = false;
                for (var j = 0; j < jsVariable.length; j++) {

                    if (area[i].getAttribute('title').trim() == jsVariable[j].trim().split(":")[0].trim()) {

                        isfound = true;

                        $(area[i]).each(function ()//get all areas
                        {
                            $(this).removeClass().addClass('Highlight_' + i)
                            var data = {};
                            $('.map').maphilight();
                            data.alwaysOn = true;
                            data.fillColor = jsVariable[j].trim().split(":")[1].trim();
                            $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                        });
                    }
                    if (!isfound) {
                        $(area[i]).each(function ()//get all areas
                        {
                            $(this).removeClass().addClass("NoHighLight");
                        });
                    }
                }
            }
        }
   </script>