首次使用后，JavaScript函数的参数变为未定义

Question

I finally came up with code, which gets jSON data from file and now I'm trying to make some functions for that. Take a look at the code:

var comments = [];

function printComment(comment) {

var $comment_div = "<div class='comment'><p class='comment-text'>"+comment.comment_body+"</p><img class='comment-photo' src='"+comment.comment_url+"'/><a rel='"+comment.comment_from+"' class='name' href='"+comment.comment_url+"'>"+comment.comment_user+" via <i class='fa'></i></a></div>";

$($comment_div).appendTo('#comments-content');

};

var i = 0

$(function() {

$.getJSON("js/comments.js", function(data) {

    comments = data.comments;

    for(i; i < 3; i++ ) {

        printComment(comments[i]);
        console.log(i);

    }

    setInterval(function() {

        if ( i > comments.length ) {

            i = 0;

        } else {

            i++;
            printComment(comments[i]);
        }

        console.log(i);

    }, 5000);  

});

});

Problem is that the globally defined function triggers in the "for" loop with no problem, but in function in setInterval console returns "comment (which is argument of function printComment) is undefined". Could you direct me or just answer what I'm doing wrong?

Cheers!

Answer 1

I believe the problem is that your if condition resets i only if i > comments.length , however, if i == comments.length (or even i == comment.length - 1 ) then your code in the else block will try to access items beyond the bounds of the array. I think you're looking for something like this:

setInterval(function() {
    if ( i >= comments.length ) {
        i = 0;
    }

    printComment(comments[i++]);
}, 5000);

Although your code is very confusing. It's hard to tell exactly what you're trying to accomplish here.