Ist JavaScript single-threaded ist? Wenn nicht, wie bekomme ich die synchronisierten Zugriff auf gemeinsame Daten?

Ich habe eine web-Seite mit DIVs mit einem mouseover - handler, der vorgesehen ist, um zu zeigen, ein pop-up-Informationen, die Blase. Ich will nicht mehr als eine info-Blase sichtbar sein, eine Zeit. Aber wenn sich der Benutzer bewegt die Maus schnell über zwei Elemente, manchmal bekomme ich zwei Blasen. Sollte dies nicht passieren, da der code zum anzeigen einer pop-up wird die Vorherige pop-up.

Wäre dies ein multi-Thread-system ist, dann wäre das problem offensichtlich: es gibt zwei threads versuchen zu zeigen, ein pop-up, und Sie beide Abbrechen vorhandenen pop-ups, dann pop-up, die Ihre eigenen pop-ups. Aber ich nahm an, JavaScript ist laufen immer single-threaded, welche dies verhindern würde. Bin ich falsch? Sind event-Handler asynchron ausgeführt wird, in welchem Fall ich brauche synchronisierten Zugriff auf gemeinsam genutzte Daten, oder sollte ich stattdessen auf der Suche nach bugs in der code-Bibliothek für die Aufhebung pop-ups?

Bearbeitet, um hinzufügen:

Der Bibliothek in Frage SIMILE Timeline und seine Ajax-Bibliothek;
Die event-handler-Aufruf SimileAjax.DOM.cancelEvent(domEvt), was ich davon ausgehen, basierend auf dem Namen bricht die bubbling-events:
Nur, damit die Sache mehr kompliziert, was ich eigentlich mache, ist ab einem timeout, wenn keine Kündigung durch eine moustout zeigt die pop-up, dies bestimmt zu verhindern, pop-ups, flimmern störend, aber dummerweise haben die umgekehrte Wirkung.

Werde ich einen anderen Sack auf, und sehen, ob ich herausfinden können, wo ich bin, die falsch gehen. 🙂

InformationsquelleAutor |

9

Ja, Javascript ist single-threaded. Auch mit Browsern wie Google Chrome, es ist ein thread pro tab.

Ohne zu wissen, wie Sie versuchen, zu kündigen, ein pop-up von anderen, es ist schwer zu sagen, was die Ursache des Problems.

Wenn deine DIVs sind verschachtelt in einander, haben Sie möglicherweise eine event-propagation Problem.
- Naja, ich denke, Chrome macht AJAXing mit mehreren threads, aber die haben wohl synchron, bevor Sie Ihre callback-in Ihre Skripte
- Ja, wenn Sie eine asynchrone XML-HTTP-Aufruf, muss es in einem anderen thread als dem Haupt-JS-thread, sonst wäre es ja nicht "asynchron". Für alle Absichten und Zwecke, obwohl, es ist nur ein thread. Sie nicht haben, um sorgen über die Synchronisierung in javascript.
- Alle Browser AJAX auf mehreren threads-das ist, was die Asynchrone bit bedeutet. Im Allgemeinen ist keine browser keine Netzwerk-Verkehr synchron, sofern es sich nicht vermeiden lässt (der einzige Weg, um es zu lösen, ist durch synchrones XHR), aber das unterscheidet sich von JS -- JS läuft immer noch auf dem Haupt-UI-thread.
- Update: 3 Jahre später, mit dem Aufkommen von HTML5-JS ist nun multi-threaded.
InformationsquelleAutor pkaeding
2

Ich weiß nicht, die Bibliothek, die Sie verwenden, aber wenn Sie nur versuchen, die Anzeige eines QuickInfo somesort zu einer Zeit,... verwenden Sie ein flyweight-Objekt. Im Grunde ein Fliegengewicht ist, was aus einst und immer und immer wieder verwendet. Denken Sie an eine singleton-Klasse. So rufen Sie eine Klasse statisch, die als erste aufgerufen wird, erzeugt automatisch ein Objekt von sich selbst und speichert Sie. Man das passiert jedem alle statischen Referenzen das gleiche Objekt, und weil dieser Sie nicht bekommen, die mehrere tooltips oder Konflikte.

Ich benutze ExtJS und Sie tun, tooltips, und die message Boxen, da beide Fliegengewicht Elemente. Ich bin der Hoffnung, dass Ihre Rahmenbedingungen hatten flyweight-Elemente enthält, sonst wirst du nur haben, um Ihre eigenen singleton und nennen es.

InformationsquelleAutor
1

Es ist single-threaded in-Browser. Event-Handler ausgeführt werden asynchroniously in einem thread, non-blocking muss nicht immer bedeuten, Multithread. Ist einer deiner divs ein Kind des anderen? Da Ereignisse verbreiten sich wie Blasen in der dom-Baum von Kind zu Elternteil.

InformationsquelleAutor Vasil

Ähnlich zu dem, was pkaeding sagte, es ist schwer zu erraten, das problem ohne zu sehen markup und Skript; jedoch, ich wage zu sagen, dass Sie nicht richtig stoppen der Propagierung des Ereignisses und/oder du bist nicht richtig versteckt, das vorhandene element. Ich weiß nicht, ob Sie mit einem Rahmen oder nicht, aber hier eine mögliche Lösung mit Prototyp:

//maintain a reference to the active div bubble
this.oActiveDivBubble = null;

//event handler for the first div
$('exampleDiv1').observe('mouseover', function(evt) {
    evt.stop();
    if(this.oActiveDivBubble ) {
        this.oActiveDivBubble .hide();
    }
    this.oActiveDivBubble = $('exampleDiv1Bubble');
    this.oActiveDivBubble .show();

}.bind(this));

//event handler for the second div
$('exampleDiv2').observe('mouseover'), function(evt) {
    evt.stop();
    if(this.oActiveDivBubble) {
        this.oActiveDivBubble.hide();
    }
    this.oActiveDivBubble = $('exampleDiv2Bubble');
    this.oActiveDivBubble .show();
}.bind(this));

Natürlich könnte verallgemeinert werden, weiter, indem man alle Elemente mit, sagen wir, in die gleiche Klasse, das Durchlaufen werden, und die Anwendung der gleichen event-handling-Funktion, um jeden von Ihnen.

So oder so, hoffentlich hilft.

InformationsquelleAutor Tom

1

FYI: seit Firefox 3 gibt es eine änderung ziemlich relevant für diese Diskussion: Ausführungs-threads verursacht synchronen XMLHttpRequest-Anfragen bekommen abgetrennt (dies ist der Grund, warum die Schnittstelle nicht einfrieren gibt es bei synchronen requests) und die Ausführung fortgesetzt. Bei synchroner request Abschluss, kann der thread weiterhin als gut. Sie werden nicht gleichzeitig ausgeführt, jedoch gestützt auf die Annahme, dass single-thread beendet, während ein synchrones Verfahren (request) passiert, gilt nicht mehr.
- Können Sie den Quellcode von Ihrer letzten Aussage?
InformationsquelleAutor Sergey Ilinsky
0

Könnte es sein, dass die Anzeige nicht erfrischend schnell genug. Abhängig von der JS-Bibliothek, die Sie verwenden, Sie könnten in der Lage sein, eine kleine Verzögerung auf dem pop-up "show-Effekt".

InformationsquelleAutor Toby Hede

Hier ist die funktionierende version, mehr oder weniger. Wenn Sie Objekte erstellen, legen wir einen mouseover Veranstaltung:

var self = this;
SimileAjax.DOM.registerEvent(labelElmtData.elmt, "mouseover", function (elt, domEvt, target) {
    return self._onHover(labelElmtData.elmt, domEvt, evt);
});

Dieser eine Funktion aufruft, setzt ein timeout (pre-bestehenden timeouts für eine andere Sache storniert zuerst):

MyPlan.EventPainter.prototype._onHover = function(target, domEvt, evt) {            
    ... calculate x and y ...
    domEvt.cancelBubble = true;
    SimileAjax.DOM.cancelEvent(domEvt);
    this._futureShowBubble(x, y, evt);

    return false;
}
MyPlan.EventPainter.prototype._futureShowBubble = function (x, y, evt) {
    if (this._futurePopup) {
        if (evt.getID() == this._futurePopup.evt.getID()) {
            return;
        } else {
            /* We had queued a different event's pop-up; this must now be cancelled. */
            window.clearTimeout(this._futurePopup.timeoutID);
        } 
    }
    this._futurePopup = {
        x: x,
        y: y,
        evt: evt
    };    
    var self = this;
    this._futurePopup.timeoutID =  window.setTimeout(function () {
            self._onTimeout();
    }, this._popupTimeout);
}

Dies zeigt wiederum die Blase, wenn es ausgelöst wird, bevor er abgebrochen:

MyPlan.EventPainter.prototype._onTimeout = function () {
    this._showBubble(this._futurePopup.x, this._futurePopup.y, this._futurePopup.evt);

};

MyPlan.EventPainter.prototype._showBubble = function(x, y, evt) {
    if (this._futurePopup) {
        window.clearTimeout(this._futurePopup.timeoutID);
        this._futurePopup = null;
    }        
    ...

    SimileAjax.WindowManager.cancelPopups();
    SimileAjax.Graphics.createBubbleForContentAndPoint(...);
};

Diese scheint zu funktionieren, jetzt habe ich den timeout-Wert auf 200 ms anstatt 100 ms. Nicht sicher, warum eine zu kurze timeout bewirkt, dass die multi-bubble-Ding zu sein, aber ich denke, queuing von window-Ereignisse oder etwas, was vielleicht noch passiert, während die neu hinzugefügten Elemente angelegt.

InformationsquelleAutor pdc

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.