dcsimg
www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: dont make function within a loop

  1. #1
    Join Date
    Sep 2016
    Posts
    7

    dont make function within a loop

    hello
    is there someone who could write for me this part of javascript without the message i got: "dont make function within a loop"
    a great thanks for your help

    var elements = document.querySelectorAll("#boite, .souris");
    for (var j = 0; j < elements.length; j++) {
    elements[j].addEventListener("mouseenter", function() {
    window.Am = 1;
    });

    elements[j].addEventListener("mouseleave", function() {
    window.Am = 0;
    });
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    Where did you get the message from?
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Sep 2016
    Posts
    7
    i got it with dreamweaver
    with jslint Unexpected 'for'.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    The only warnings I take notice of are those issued by the web browsers console and W3C validator.

    Without the page code to have the script work against, as far as I can see, theres nothing wrong with it.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  5. #5
    Join Date
    Mar 2011
    Posts
    96
    The way you have it now you're creating an amount of identical anonymous functions equal to elements.length. You could save some memory by creating one function and referring to it like:
    Code:
    function handler() {
     window.Am = 1;
    }
    
    for (var j = 0; j < elements.length; j++) {
     elements[j].addEventListener("mouseenter", handler);
    }

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    Quote Originally Posted by Kever View Post
    The way you have it now you're creating an amount of identical anonymous functions equal to elements.length. You could save some memory by creating one function and referring to it like:
    Code:
    function handler() {
     window.Am = 1;
    }
    
    for (var j = 0; j < elements.length; j++) {
     elements[j].addEventListener("mouseenter", handler);
    }
    if you look at the reason, the person is looking to set a property based on the mouse interaction and I am betting that its just an example of two of several interactions that they are looking for.

    It shouldn't make the slightest bit of difference if its an event handler function or an anonymous function that is used.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  7. #7
    Join Date
    Mar 2011
    Posts
    96
    It shouldn't make the slightest bit of difference if its an event handler function or athat is used.
    The point I was trying to make is that inside the loop, you create an anonymous function more than once (all identical functions in the memory). It would spare some memory to declare that function once and refer it multiple times (only one function in the memory). In practice you would need a really old computer or millions of iterations to notice the difference.

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    Quote Originally Posted by Kever View Post
    The point I was trying to make is that inside the loop, you create an anonymous function more than once (all identical functions in the memory). It would spare some memory to declare that function once and refer it multiple times (only one function in the memory). In practice you would need a really old computer or millions of iterations to notice the difference.
    it shouldn't make the slightest bit of difference as either method does the same thing, the question is this jslint error, while I had originally stated what I use, my belief is that the problem is within the validation tool and not the code block.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  9. #9
    Join Date
    Sep 2016
    Posts
    7
    thanks for yours answers

    with what says kever
    i have made

    document.addEventListener("DOMContentLoaded", function() {
    var elem = document.querySelectorAll(".BoItE, .StOp");
    var j;
    function mOuSeE() {
    window.Am = 1;
    }
    function mOuSeL() {
    window.Am = 0;
    }
    for (j = 0; j < elem.length; j+=1) {
    elem[j].addEventListener("mouseenter", mOuSeE);
    elem[j].addEventListener("mouseleave", mOuSeL);

    }
    });
    it still work without the loop in dreamweaver and jslint, i dont know if it is better than the first code
    but now jslint tell "unespected for"

  10. #10
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    I wouldn't pay too much attention to things like JSLint. the error is likely due to the space (which you really shouldn't have) between the for and the opening conditions, you have for ( when it should be for(
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  11. #11
    Join Date
    Sep 2016
    Posts
    7
    thanks
    you know i have never learn javascript
    i have 2 others questions:
    can i compress my javascript in a tool like this oe? http://www.danstools.com/javascript-minify/
    and must i put "use strict" after the function and the jslint: /*jslint browser:true, for:true */ /*global window*/ at the begining of the javacript?
    a great thanks

  12. #12
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,016
    You can do the code compression which is just removing all the white space that not needed but that then makes editing harder, some compression tools will rename functions to remove lengthy name conventions, this also has problems with following the script. IMHO you should only do this if its going to save you a sizeable chunk of data space and speed up transfer of the script to the client.

    JSLint, "strict"; and the other stuff... I tried using a couple of online tools and to be honest, they are more bother than they are worth as your able to write code on your computer and with the browsers console log, see all the errors that it is detecting and correct them without having some tool to tell you that something is wrong and I don't ever use "strict"; in any of my scripts because it stops you from using certain functions that are really useful, IMHO its a retarded approach by a standards organisation and by some stuffed shirt that is trying to impose compiled programming standards on something that has for 30 odd years never needed restrictions while justifying their job. Totally pointless if you ask me, I am sure that theirs plenty of people out there who would find some way of disagreeing and giving reasons why you should use "strict";, only thing I can say is if you want to limit yourself, go ahead and use it.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  13. #13
    Join Date
    Sep 2016
    Posts
    7
    thanks for your answer
    for the compression i use danstools because it just remove the white space, some other dont do only that, that is what i have saw and i have got some troubles

  14. #14
    Join Date
    Jun 2009
    Location
    Jacksonville, FL U.S.A.
    Posts
    28
    You get a nodeList from querySelectorAll() so you don't need to use a for loop and can instead use the forEach method. I think that's why you see the unexpected for message.

    [URL=
    Last edited by Clock Out; 01-09-2017 at 02:14 PM.

  15. #15
    Join Date
    Jun 2009
    Location
    Jacksonville, FL U.S.A.
    Posts
    28
    I don't mean to double post by it looks like my post got chewed up. Here's an example on how to use the NodeList.forEach() method to attach event listeners.

    JS Fiddle Example

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles