javascript - 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 的情况下并发执行，从而使您的页面保持响应。

参见 this article on "chunking"有关其工作原理的更多信息。