Recargar elemento por cada cierto 5 minutos

[mariomb19]

Buenas estoy buscando y no logro como recargar el elemento div resumen cada 5 minutos, tiene una animacion css y lo que se requiere cuando pasen 5 minutos recargar si hay un cambio en la variable que recibimos sin recargar la pagina.

De antemano muchas gracias por su ayuda.

Código Javascript:

var reload=false;
 
function reloadMarquesina(){
                console.log('reloadhMarquesina')
                loadMarquesina();
            }
        
            function loadMarquesina(){
                console.log('loadMarquesina')
                $( "#resumen" ).html();
                var route = "<?=route('actividadResumen');?>";
                $.getJSON( route, {
                    format: "json"
                })
                .done(function(res) {
                    $( "#actividadResumen" ).show();
                    $.each(res, function( key, value ) {
                        $( "#resumen" ).append("<span class='resumenContenedor'> <span class='"+value.tipo+"'> <img class='logoResumen' src="+value.logo+" /> </span> <span class='"+value.tipo+"'>"+value.empresa+" "+value.mensaje+ " </span> </span>");
                    });
                    setTimeout(function(){
                        console.log('reload=true');
                        reload = true;
                        reloadMarquesina();
                    }, 5000);
                })      
                .fail(function( jqxhr, textStatus, error ) {
                    $( "#actividadResumen" ).hide();
                    var err = textStatus + ", " + error;
                    //console.log( "Request Failed: " + err );
                }); 
            
            }
 

Código CSS:

.marqueeResumen {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}
 
.marqueeResumen:hover {
    animation-play-state: paused
}
 
/* Make it move */
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}
 
.resumenContenedor{
    margin-right: 500px;
}
 
@media(max-width: 768px){
    .resumenContenedor{
        margin-right: 200px;
    }
}
.resumenpostulacion{
  padding: 8px 5px 0px 5px;
  color: #97bc4d;
}
 
.resumencantidad{
  padding: 8px 5px 0px 5px;
}
 
.logoResumen{
  padding-top: 6px;
  width: 48px;
}
 

Código HTML:

<div id="actividadResumen" class="actividadResumen" style="display: none !important;">
                <div class="marqueeResumen">
                    <div id="resumen"></div>
                </div>
            </div>