2

すべて、javascript がシングル スレッド モードで実行されることはわかっています。しかし、いくつかの状況で複数のスレッドの世界で一般的な競合の問題があるかどうかはわかりません。あなたがhtml構造を持っているとしましょう

<div id='parent' class="parent container">
    <div id="child1" class="child container">
       <div id="child11" class="child container">
           <!--maybe there are more nested divs with class 'container' -->
       </div>
       <div id="child12" class="child container">
           <!--maybe there are more nested divs with class 'container' -->
       </div> 
    </div>
    <div id="child2" class="child container">
       <div id="child21" class="child container">
           <!--maybe there are more nested divs with class 'container' -->
       </div>
       <div id="child122" class="child container">
           <!--maybe there are more nested divs with class 'container' -->
       </div> 
    </div>
</div>

JS コード:

$(function() {
    $('div.container').mouseenter(function(e){
        e.stopPropagation();
        $(this).css("border","2px solid red");//set it selected state.
        $(this).append("<div class='newdiv'></div>"); 
        $(this).parents().each(function(){
            if ($(this).children(".newdiv").length>0)
            {
                $(this).children(".newdiv").remove();
                $(this).css("border","1px solid black");//set father of it not selected state
            }
        });
    }).mouseleave( function(e){
        $(".newdiv",this).remove();
        if ($(this).parent().hasClass("container") && $(".newdiv",$(this).parent()).length==0)
        {
            $(this).parent().css("border","2px solid red");//set it's parent selected state.
            $(this).parent().append("<div class='newdiv'></div>"); 
        }
        $(this).css("border","1px solid black");//set it not selected state.
    });
});

これらの div の内外でマウスを十分に速く動かした場合、競合の問題があるとは思いませんでした。div.newdiv削除されていないことがあることがわかったからです。JavaScriptの実行メカニズムを理解していなかっただけだと思います。だから私はそのような質問があります。私がそれをよりよく理解するのを助けるために、誰かがそれについてもっと教えてくれることを願っています. ありがとう。

4

2 に答える 2

3

JavaScriptの実行メカニズムを理解していなかっただけだと思います。だから私はそのような質問があります。私がそれをよりよく理解するのを助けるために、誰かがそれについてもっと教えてくれることを願っています.

Javascript にはマルチスレッド機能がないため、競合の問題がある可能性があると言うのは誤りです。お気づきかもしれませんが、Javascript はイベント駆動型言語です。これは、イベントがトリガーされたかどうかをチェックするmain loopと、トリガーされたイベントに対して実行されるイベント処理 bodyという 2 つの主要なフェーズを持つ一種のアーキテクチャです。

この場合、問題はそのメイン ループフェーズにあります。onmouseenterマウスがノードの端に来る時間のごく一部です。そのため、メインループで別のイベントをチェックしているときに端にいると、あなたの問題のようなことが起こります。しかし、hoverを使用すると、この部分の時間が長くなるため、メインループでチェックされる確率が高くなります (ほぼ 100%)。

于 2013-03-29T04:22:05.207 に答える
2

代わりに、mouseenterandの代わりにmouseleave、.hover()競合しないより良い解決策を提案できます。

$('div.container').hover(function(e){
    e.stopPropagation();
    $(this).css("border","2px solid red");//set it selected state.
    $(this).append("<div class='newdiv'></div>"); 
    $(this).parents().each(function(){
        if ($(this).children(".newdiv").length>0)
        {
            $(this).children(".newdiv").remove();
            $(this).css("border","1px solid black");//set father of it not selected state
        }
    });
}, function(e){
    $(".newdiv",this).remove();
    if ($(this).parent().hasClass("container") && $(".newdiv",$(this).parent()).length==0)
    {
        $(this).parent().css("border","2px solid red");//set it's parent selected state.
        $(this).parent().append("<div class='newdiv'></div>"); 
    }
    $(this).css("border","1px solid black");//set it not selected state.
});
于 2013-03-29T03:28:33.397 に答える