如何在元素fadeOut（）上停止setInterval函数？

Question

对于我当前正在从事的项目，有一个HTML / jQuery加载屏幕，带有无休止的滚动字幕动画，它使用setInterval()每隔250ms重复添加“正在加载”一词。

此刻，我正试图让span停止使用clearInterval()的间隔添加，因为页面已完全加载，并且出于性能原因，加载屏幕消失了；但是，我无法使代码正常工作。

HTML：

<div id="loading">
    <div class="loader"><span>LOADING LOADING </span></div> 
</div>

CSS：

#loading {
    top:0;
    left:0;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-align: center;
    z-index: 1000;
    background: #fff;
}

#loading .loader {
    display:inline-block;
    padding: 16px;
    font-weight:bold;
    font-size: 2em;
    background: #200f9d url(images/bg_portfolio.png);
    background-size: 500px;
    margin: 0 auto;
    color:#fff;
    line-height: 1;
    overflow:hidden;
    white-space: nowrap;
    width:0;
    opacity: 0;
}

#loading .loader span {
    animation: loading 50s linear infinite;
    display: block;
}

@keyframes loading {
    from { transform: translateX(0%); }
    to { transform: translateX(-5000%); }
}

JS：

var loadingText = $("#loading .loader span").text();
var loaderInterval;

$("#loading .loader").imagesLoaded( { background: true }, function() {
    $("#loading .loader").animate({ opacity: 1, width: 200 }, 500 );

    var loaderInterval = setInterval(function() {
        $("#loading .loader span").append(loadingText); }, 250);
    }); // appends two more "Loading"s in all-caps every 250ms

$(window).on("load", function(){
    $("#loading").delay(1000).fadeOut(function() {
        clearInterval(loaderInterval);
        // supposedly stops appending when div#loading fades out
    });
    [...]
});