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"。

Answer 2

这是因为JavaScript doesn't have proper tail calls。

你的函数永远在自己结束时调用自己。第一个永远不会完成并返回，第二个也不会，直到你用完堆栈并爆炸为止。

您可以尝试改用setTimeout。请参阅example on jsFiddle。

编辑您可能不想使用 0，除非您确实需要它连续运行。即使使用 100，您也会每秒执行 10 次函数。

function foo(){
  console.log('foo');
  setTimeout(foo, 0);  
}

foo();

Answer 3

这是一种更清洁的方法。

var coko = $('#cokokunanlarcontent');             // cokokunanlarcontent
var cokos = $('[id^="cokokunanlar"]').not(coko);  // cokokunanlar1..2..3 etc

var total = cokos.length;  // total quantity

var i = 0;

var allow = true;

$('.jquerycokokunanlarbutton').attr('src','images/sabah/buton-pasif.png');

function slidecokokunanlar( isRestart ) {

    if( !isRestart ) {
        $('img[rel="' + cokos[i].id + '"]').attr('src','images/sabah/buton-aktif.png');

        coko.html( cokos.eq(i).html() )
            .fadeIn( 'slow' );
    }
    if( allow ) {
        coko.delay( 3000 )
            .fadeOut('slow', function() {
               i = (++i % total);
               slidecokokunanlar();  // recursively call with next index or 0
            });
    }
}

slidecokokunanlar();  // start it off

function restartSlider() { 
    allow = true;
    slidecokokunanlar( true );
}

function stopSlider() { 
    allow = false;
}

stopSlider();   // to stop it

restartSlider();  // to restart it