jquery - setInterval と Ajax の問題

Question

setinterval を使用して 10 分ごとに ajax 呼び出しを実行しています。その呼び出しは、php ページから新しい投稿データを取得し、それを変数にスローしています。その新しい投稿データをロードしたいときは、リンクをクリックすると、ページの前に追加されます。

ページが 30 分間非アクティブになっていると、ajax 呼び出しが 3 回 (毎分) 実行されるという問題が発生しています。次に、リンクをクリックして新しい投稿を読み込むと、3 回読み込まれます。

一度だけロードする必要があります。

これが私のコードです。

    var getNewPosts = function() {
    $.ajax({
        type: 'GET',
        url: 'interactions/get_new_posts.php',
        async: true,
        cache: false,
        //dataType: 'json',
        success: function(results) {
            var data = results;
            // New Posts
            var instagramPosts = $(data).find('#instagramPosts').html();


            //Load new Instagram Posts
            $(document).one('click', '.instagram_menu', function(e) {
                $('#feed_wrap').prepend(instagramPosts).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
                console.log(instagramPosts);
            });

        },
        error: function(results) {
            //console.log('true', results);


        }
    });
};

var interval = 1000 * 60 * 10; // Last int is minutes
setInterval(getNewPosts, interval);

新しい投稿が変数 instagramPosts に読み込まれていることがわかります。次に、.instagram_menu をクリックすると、それらの新しい投稿が先頭に追加されます。

繰り返しますが、問題は、この関数を複数回呼び出してそのままにしておくと、.instagram_menu をクリックすると、関数が呼び出された回数だけそれらの投稿が読み込まれることです。

これでどこに行けばいいですか？正しい方向性を教えてもらいたいのですが、ただコードを渡して終わりにするのではありません。ありがとう