How to remove alert from "Uncaught Rangeerror: Maximum call stack size exceeded"

Question

I have a file .js on my website where I put some effects and everything else. The problem is that you are charging an alert "Uncaught Rangeerror: Maximum call stack size exceeded" and I don’t know what it is.

Is it a code error? Because all commands and effects are executed normally.

Man jQuery is this:

jQuery(document).ready(function(){

    //======================================================
    // Ajuste automático da altura do background do header
    var header = jQuery('#header'),
        bg = jQuery('#bg'),
        altura_janela = jQuery(window).height(),
        altura_final = altura_janela - 125;

        bg.css({ 'height': altura_final+'px' });


    //======================================================
    // Menu fixo
    var headerBottom = 200;
    jQuery(window).scroll(function() {
            var scrollTop = jQuery(window).scrollTop(), menufixo = jQuery("#menu-fixo");
            if (scrollTop > headerBottom) {
                if (menufixo.is(":visible") == false) {
                    menufixo.fadeIn(300);
                }
            } else {
                if (menufixo.is(":visible")) {
                    menufixo.fadeOut(300);
                }
            }
    });


    //======================================================
    // Botão voltar ao topo
    jQuery(window).scroll(function(){
        var scrollTop2 = jQuery(window).scrollTop(), backtop = jQuery("#back-top");
        if (scrollTop2 > 500) {
             if (backtop.is(":visible") == false) {
                  backtop.fadeIn(200);
             }
        } else {
             if (backtop.is(":visible")) {
                  backtop.fadeOut(100);
             }
        }
    });


    //======================================================
    // Efeito âncoras
    jQuery('a[href^="#"]').on('click',function(e){
        e.preventDefault();

    var target = this.hash;

    if (target == '') { e.preventDefault(); }
    else if (target == '#topo') { 
        jQuery('html, body').stop().animate({ 'scrollTop': 0 }, 900, 'swing');
    }
    else if (target == "#maisconteudo") {
        jQuery('html, body').stop().animate({ 'scrollTop': 700 }, 900, 'swing');
    }
    else {
        var Starget = jQuery(target),
            alturadolink = Starget.offset().top,
            alturaefeito = (alturadolink - 70);

        jQuery('html, body').stop().animate({ 'scrollTop': alturaefeito }, 900, 'swing');
    }

    });


    //======================================================
    // Efeito seta que mexe
    var imgSETABAIXO = jQuery('#seta');
    jQuery(function() {
       function setaShake() {
          if (imgSETABAIXO.css('display') != 'none') {
              imgSETABAIXO.animate({"padding":"30px 0"},600).animate({"padding":"24px 0"},400);
              setTimeout(setaShake(),1500);
          }
       }
       setaShake();
    });


    //======================================================
    // Carousel de notícias
    var carousel = jQuery('#carousel');
    carousel.cycle({
        fx: 'carousel',
        carouselVisible: '3',
        next: '.carousel-next',
        prev: '.carousel-prev',
        slides: '> .carousel-post',
        timeout: '20000',
        pager: '.carousel-pager',
        pagerTemplate: '<a href="#">A</a>'
    });

});

I believe the problem lies in this effect: (see online)

//======================================================
// Efeito seta que mexe
var imgSETABAIXO = jQuery('#seta');
jQuery(function() {
   function setaShake() {
      if (imgSETABAIXO.css('display') != 'none') {
          imgSETABAIXO.animate({"padding":"30px 0"},600).animate({"padding":"24px 0"},400);
          setTimeout(setaShake(),1500);
      }
   }
   setaShake();
});

It’s an effect that makes an arrow keep moving down and up infinitely.

What could it be? Thank you.

Answer 1

I removed the setTimeout that was causing the problem and added setInterval for the movement to keep repeating and was like this:

//======================================================
// Efeito seta que mexe
var imgSETABAIXO = $('#seta');
$(function() {

   function setaShake() {
      if (imgSETABAIXO.css('display') != 'none') {
          imgSETABAIXO.animate({"padding":"30px 0"},600).animate({"padding":"24px 0"},400);         
      }  
   }
   setaShake();
   setInterval(setaShake,1100);     
});

The jQuery considers the setTimeout as a guy who will only make a certain process once, because it was exceeding the expected limit and when Oce tried to reference the method again Oce called him, just remove the parentheses that would work too, would be like this:

//======================================================

    // Efeito seta que mexe
    var imgSETABAIXO = $('#seta');
    $(function() {
       function setaShake() {
          if (imgSETABAIXO.css('display') != 'none') {
              imgSETABAIXO.animate({"padding":"30px 0"},600).animate({"padding":"24px 0"},400);
              setTimeout(setaShake,1500);
          }
       }
       setaShake();
    });

Source: https://rogeriolino.wordpress.com/2006/12/19/javascript-settimeout-e-setinterval/