how javascript excutes callback with parameters

Question

i am in trouble with javascript‘s callback,my code seems simple:

        var i =0;
        for (; i < listSize+1; i++) {
            var content = "content"+i;
            $("#" + content).focus(function () {
                $("#" + content).keydown(check(new Number(i)));
                $("#" + content).keyup(check(new Number(i)));    
            });
        }

where lisetSize=3 in my test case and content is the html element's id

and the callback function check(my_num) is:

        function check(my_num) {
            var content = "content"+my_num;
        }

then i try to trigger this function through keyboard input.

however,i got the result that content=content4 all the time via my broswer's debugger,even though the listening element is content0

i have try anyway such as $.extend({},i) $.extend(true,{},i)

it make no difference

now i have no idea about this problem,how can i just pass a value but no reference to the callback function's parameter?

Cerbrus · Accepted Answer · 2016-09-22 12:50:52Z

1

You're not declaring the handlers correctly.

Replace:

$("#" + content).keydown(check(new Number(i)));
$("#" + content).keyup(check(new Number(i)));

With:

$("#" + content).keydown(function(){check(new Number(i));});
$("#" + content).keyup(function(){check(new Number(i));});

What you need to pass to keyup and keydown, are functions that need to be called when keyboard events happen.

What you were passing to keyup and keydown, were the results of calling check(new Number(i)).

Also, since you're declaring these in a loop, you'll want to copy the number to a new variable, in order to reference the current loop iteration's value:

$("#" + content).focus(function () {
    var currentNumber = i;
    $("#" + content).keydown(function(){check(currentNumber);});
    $("#" + content).keyup(function(){check(currentNumber);});   
});

answered Sep 22, 2016 at 12:50

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phylogenesis Over a year ago

If you are able to rewrite your loop to use Array.prototype.forEach() (and you don't need to support older browsers), then you don't have to worry about closing over a loop variable either.

Community · Accepted Answer · 2017-05-23 11:51:46Z

Thanks for Cerbrus,even though there is still problem.

Now I realize that the problem was caused by misunderstanding the real running order.

Even after the loop ends up, $("#" + content).focus will still be called once user click the element.And then,the program starts the code

function () {
            $("#" + content).keydown(function(){check(currentNum);});
            $("#" + content).keyup(function(){check(currentNum);});    
        }

As the loop has ended,currentNum=4,so everything got an error.

Here is my solution:

for (var i = 0; i < listSize + 1; i++) {
            var content = "content" + i;
            $("#" + content).focus(function () {
                $(this).keydown(function () {
                    check($(this));
                });
                $(this).keyup(function () {
                    check($(this));
                });
            });
        }

function check(trigger) {
            var my_num = getContentNum(trigger);
        }

function getContentNum(content) {
            return (content.attr("id").charCodeAt(7))-48;
        }

Not elegant but useful.

Collectives™ on Stack Overflow

how javascript excutes callback with parameters

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related