jquery递归函数中奇怪的无限循环错误

Question

我正在处理的项目中有一个奇怪的问题.这会自动更改图像源和div的内容.

我编写了一个函数,但是它陷入无限循环并且页面没有加载(页面总是显示加载页面).

这些是代码:

$.fn.extend({
    changehaber: function(a){
     $('#cokokunanlarcontent').fadeOut('slow',function() {
           $('.jquerycokokunanlarbutton').attr('src','images/sabah/buton-pasif.png');
           $('img[rel="'+a+'"]').attr('src','images/sabah/buton-aktif.png'); 
        }).html($('#'+a).html()).fadeIn('slow');
        return this;
    }
});

function slidecokokunanlar() {
    $('#cokokunanlarcontent').html($('#cokokunanlar1').html()).delay(3000).changehaber('cokokunanlar2').delay(3000).changehaber('cokokunanlar3').delay(3000).changehaber('cokokunanlar4').delay(3000).changehaber('cokokunanlar5').delay(3000);
    slidecokokunanlar();
}

slidecokokunanlar();

这里有什么问题,当执行它时,我希望函数无限工作,但页面显示它总是加载.这是控制台的输出:

Uncaught RangeError: Maximum call stack size exceeded

提前致谢

Answer 1

您无法在不阻塞整个执行堆栈的情况下从内部调用函数.通过从内部调用函数,您可以有效地阻止它返回,并且由于Javascript是单线程的,所以一切都将停止!

将您的功能更改为:

function slidecokokunanlar() {
    $('#cokokunanlarcontent').html($('#cokokunanlar1').html()).delay(3000)...
    setTimeout(slidecokokunanlar, 0);
}

这允许在不阻止UI的情况下并发执行,从而允许您的页面保持响应.

有关其工作原理的更多信息,请参阅有关"分块"的文章.