정의되지 않은 JSON의 '0'속성을 읽을 수 없습니다.

몇 초마다 이미지 'displayMain'을 변경하는 이미지 슬라이더를 만들려고합니다. 내 문제는 setInterval에서 displayMain 함수를 호출 할 때 '정의되지 않은 속성 0을 읽을 수 없음'오류가 계속 발생한다는 것입니다. jsonData [i] .name의 하드 코딩 된 값을 사용하더라도 동일한 오류가 발생합니다. 그러나 값은 displayThumbs에서 잘 전달됩니다. 왜 내가 displayMain에 값을 유지할 수 없지만 displayThumbs에서 그렇게 할 수 있는지 아는 사람이 있습니까?

window.addEventListener('load', function () {
    var mainDiv = document.getElementById('main');
    var descDiv = document.getElementById('main-description');
    var gallery = document.querySelector('#main-img');
    var ul = document.querySelector('ul');
    var li;
    var i = 0;
    var displayThumbs;
    var thumbName;
    var current = 0;
    var images = [];

    function displayMain () {
        var data = images[i];
        gallery.src = 'img/' + data[0];
        descDiv.innerHTML = '<h2>' + data[1] + '</h2>';
    }

    function displayThumbs () {
        for (i = 0; i < images.length; i += 1) {
            var data = jsonData[i].name.replace('.jpg', '_thumb.jpg');
            // thumbnails use dom to make img tag
            li = document.createElement('li');
            thumbs[i] = document.createElement('img');
            var createThumbNail = thumbs[i].src = 'img/' + data;
            thumbs[i].setAttribute('alt', data);
            thumbs[i].addEventListener('click', function() {
                alert(createThumbNail);
            });
            ul.appendChild(thumbs[i]);
        }
    }

    // success handler should be called
    var getImages = function () {
        // create the XHR object
        xhr = new XMLHttpRequest();
        // prepare the request
        xhr.addEventListener('readystatechange', function () {
            if (xhr.readyState === 4 && xhr.status == 200) {
                // good request ...
                jsonData = JSON.parse(xhr.responseText);
                for (var i = 0; i < jsonData.length; i += 1) {
                    var data = [];
                    data.push(jsonData[i].name);
                    data.push(jsonData[i].description);
                    images.push(data);
                }

                displayMain();
                displayThumbs();
                setInterval(displayMain, 1000);
            }
            else {
                // error
            }    
        });

        xhr.open('GET', 'data/imagedata.json', true);
        xhr.send(null);    
    };

    // setInterval(getImages, 2000);
    getImages();
    // displayThumbs();
});