javascript - 当 div 显示时，JQuery 运行一个函数

Question

我想在显示 div 时运行一个函数。

HTML:

<div id="holder">
    <div id="main1" class="container-fluid">
        <h1>Header 1</h1>
        <div class="btn btn-default pull-right" onclick="show('main2');">Next</div>
    </div>
    <div id="main2" class="container-fluid" style="display:none;">
        <h1>Header 2</h1>
        <div class="btn btn-default pull-right" onclick="show('main3');">Next</div>
    </div>
    <div id="main3" class="container-fluid" style="display:none;">
        <h1>Header 3</h1>
    </div>
</div>

JS:

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("no such element");
        return;
    }

    var pages = document.getElementsByClassName('container-fluid');
    for (var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }

    ele.style.display = 'block';
}

我想在我的 #main3 显示时运行一个函数。功能是设置一个定时器，让#main3显示10秒后，显示#main1。

现在如何检测我的 #main3 何时显示？

Answer 1

您可以检查elementID，如果是main3，则设置setTimeout 10000 ms (10s) 并调用show ('main1') 在 ele.style.display = 'block'; 行之后超时，如下所示:

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("no such element");
        return;
    }

    var pages = document.getElementsByClassName('container-fluid');
    for(var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }

    ele.style.display = 'block';

    if(elementID == "main3"){
        setTimeout(function(){ show("main1"); }, 10000);
    }
}

DEMO