0

通常、setTimeout（）メソッドの実行は、setTimeout（）メソッドの外部にあるclearTimeout（）メソッドによって中止されますが、私の状況では、ループ自体の中でsetTimeout（）ループの実行を中止する必要があります。イベントは、指定された「待機期間」中に発生します。

以下に示す私のコードでは、ユーザーはコードAをアクティブ化するのに500ミリ秒かかります。時間枠内にコードAをアクティブ化できなかった場合、コードBはフォールバックとして実行されます。コード内でAIは2つの場所をマークしました：1）タイムアウトを停止する場所と2）関数を終了したい場所。

私のjsFiddleはここにあります。

私のJavaScriptとHTMLコードのコピーを以下に示します。

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table​​​​​​​​​​​​​​​​​​​​​​​​​​​​&gt;​​​

JavaScript

a = 500;
document.getElementById("head1").onmouseover = function(displayMenu) {
    document.getElementById("subMenu").innerHTML = "<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>";
    document.getElementById("head1").onmouseout = function(getScroll) {
        setTimeout(function() {
            document.getElementById("subMenu").onmouseover = function(breakTimeout) { // **Code A**
                a = 10000;
                // **Stop timeout.**  Now never execute Code B.
                document.getElementById("subMenu").onmouseout = function(endFunction) {
                    document.getElementById("subMenu").innerHTML = '<tr><td>Content is Dynamic!</td></tr>';
                    // **Exit function here immediately**
                }
            }
            if(a==500){
            //**Code B**:  Only execute if **Code A** never executed within time frame
                document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            }
        }, a)
    }
}​

私のデザインのコンセプトもはっきりしているといいのですが。私のコードと説明が十分に明確でない場合は、さらに質問を明確にして喜んでいます。

答えを得ることができる人に感謝し、+ 1！

4

2 に答える 2

1

あなたの元の前提は欠陥がありました。渡された関数の本体はsetTimeout()時間が経過するまで実行されないため、タイムアウトを停止したいコードは手遅れになるまで実行されません。clearTimeout()私はあなたが望むことをするはずの標準を使用するようにあなたのコードを修正しました。

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Content is Dynamic!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

ワーキングデモ

于 2012-06-08T13:38:50.237 に答える
0

グローバル変数を使用して、setTimeout（）の戻り値を格納できます。

window.myTimeout = setTimeout(function() {
    // ...
}, a);

次に、次のように、任意のコンテキストからタイムアウトをクリアできます（window.myTimeoutが変更されていない限り）。

clearTimeout(window.myTimeout);

注：「ウィンドウ」部分はオプションです。これは、特にコードが複雑で巨大な場合に、グローバル変数を簡単に識別できるようにするために私が個人的に使用する規則にすぎません。

于 2012-06-08T13:24:44.367 に答える