这个函数会减慢页面加载时间吗？如何优化？

Question

早上好,

我目前正在完成一个项目：http://schaedlingsbekaempfer24.eu/

在为简单的自调用fadeOut/fadeIn效果嵌入一点javascript之后，页面加载时间增加了4到5秒。

这是我的js：

$(document).ready(function() {

    pic = $(this).find('.picture a:nth-child(2n) img');
    text = $(this).find('#testimonal p:first-child').next();

    $.fn.fader = function() {

        $(pic).delay(5000).fadeOut(300);
        $(text).delay(5000).fadeOut(300);

        $(pic).delay(5000).fadeIn(300);
        $(text).delay(5000).fadeIn(300);

        $(this).fader();
    };

    setTimeout(function() {    
      $('#preview').fader();
    }, 2000);

});

这个函数似乎是从站点开始加载的第一个时刻开始执行的。如何调整代码以获得更好的加载性能？

Answer 1

最好的解决方法是在函数内部移动设置的超时，这样就避免了递归攻击，并且每5秒只产生一次淡出调用。

现在，你正在杀死你的浏览器，迫使它进行无休止的递归调用。

如果在你的fader函数里放一个console.log(‘调用’)，你会很惊讶的！

你也可以做一些小的改进，但与你的第一个问题相比，它们真的非常小：

1-在jquery加载之后、文档就绪回调函数之前移动$.fn.fader定义

2-缓存你的选择器，例如。

var $this = $(this);
$this.delay(1000).fadeIn(300);
$this.delay(1000).fadeOut(300);

再说一次，与你的大优化问题相比，这是非常小的性能调整，本身不会提供良好的性能。