So veröffentlichen Sie zuerst JS-Ereignisse und abonnieren sie dann

Dieses Mal zeige ich Ihnen die JS--Ereignis--Methode, bei der Sie zuerst veröffentlichen und dann abonnieren Werfen wir einen Blick darauf. Ich habe bereits einen

Event-

Manager geschrieben, bei dem es sich um ein normales Modell „Abonnieren und dann veröffentlichen“ handelt. In tatsächlichen Szenarien müssen wir jedoch sicherstellen, dass diejenigen, die sich später anmelden, auch veröffentlichte Nachrichten erhalten können. Wenn wir beispielsweise dem öffentlichen WeChat-Konto folgen, können wir weiterhin historische Nachrichten sehen. Ähnlich wie bei QQ-Offline-Nachrichten sende ich sie zuerst an Sie und Sie können sie nach dem Anmelden empfangen. Damit soll sichergestellt werden, dass alle Methoden, die das Ereignis abonnieren, ausgeführt werden können.

Tatsächlich werden nur ein paar Zeilen Code hinzugefügt. Cachen Sie die Parameter des letzten Triggers. Treffen Sie dann beim Hinzufügen eines Handles eine Beurteilung. Wenn beim Abonnieren bereits zwischengespeicherte Parameter vorhanden sind, bedeutet dies, dass die Methode ausgeführt werden kann.

 var eventManger = {
        cached: {},
        handlers: {},        //类型,绑定事件 
        addHandler: function (type, handler) {            if (typeof handler !== "function") return;            if (typeof this.handlers[type] == "undefined") {                this.handlers[type] = [];
            }            this.handlers[type].push(handler);            if (this.cached[type] instanceof Array) {                //说明有缓存的 可以执行
                handler.apply(null, this.cached[type]);
            }
        },
        removeHandler: function (type, handler) {            var events = this.handlers[type];            for (var i = 0, len = events.length; i < len; i++) {                if (events[i] == handler) {
                    events.splice(i, 1);                    break;
                }
            }
        },
        trigger: function (type) {            //如果有订阅的事件，这个时候就触发了
            if (this.handlers[type] instanceof Array) {                var handlers = this.handlers[type];                var args = Array.prototype.slice.call(arguments, 1);                for (var i = 0, len = handlers.length; i < len; i++) {
                    handlers[i].apply(null, args);
                }
            }            //默认缓存
            this.cached[type] = Array.prototype.slice.call(arguments, 1);
        }
    };

eventManger.addHandler("test", function (res) {
    console.log("先订阅，后发布1", res);
})
eventManger.trigger("test", 2);
eventManger.addHandler("test", function (res) {
    console.log("先发布，后订阅2", res);
})
eventManger.addHandler("test", function (res) {
    console.log("先发布，后订阅3", res);
})

Mein eigentliches Szenario ist, dass Methode B erst ausgeführt werden kann, nachdem Ereignis A ausgelöst wurde. Methode B muss jedoch nach Methode C abgeschlossen werden. Das heißt, B hängt von der Vervollständigung von A und C ab. Und A wird fast jedes Mal schnell ausgelöst. Natürlich können Sie zwei Schalter

Variablen

und eine Proxy-Funktion einrichten und dann B ausführen, nachdem beide Ereignisse abgeschlossen sind. Der Code lautet wie folgt:

Diese Funktion ist implementiert, aber die Lesbarkeit ist schlecht und das Ereignisabonnement muss sich an der richtigen Position befinden. Wenn es vor dem Trigger liegt, wird doB niemals ausgeführt. und es gibt zwei weitere Codes und eine Methode. Das Dümmste ist, eine Variable plus setTimeout zu verwenden, um den

var aReady = false;var cReady = false;
eventManger.addHandler("A", function () {
    aReady = true;
    console.log("do A");
    proxyC();
});
eventManger.trigger("A", 2);function doB() {
    console.log("do B");    //实际B中的方法需要在A事件成功之后才能执行}function doC() {
    console.log("do C");
    cReady = true;
    proxyC();
}function proxyC() {
    aReady && cReady && doB();
}
doC();

Status

zu bestimmen, was zu einer Endlosschleife führen kann.

var aReady = false;
eventManger.addHandler("A", function () {
    aReady = true;
    console.log("do A");
});function doB() {
    console.log("do B");    //实际B中的方法需要在A事件成功之后才能执行}function doC() {
    console.log("do C");    if (!aReady) {
        console.log("wating...");        setTimeout(doC, 50);        return;
    }
    doB();
}
doC();
eventManger.trigger("A", 2);//模拟A事件触发迟

Diese Methode ist wahrscheinlich die unerwünschteste. Da externe Ereignisse zum Scheitern führen können, gibt es hier keinen Ausweg. Es ist, als würde man ein Loch graben. Aber wenn die Veranstaltung zuerst das Veröffentlichen und dann das Abonnieren unterstützt, ist das Problem einfach:

eventManger.trigger("A", 2);function doB() {
    console.log("do B");    //实际B中的方法需要在A事件成功之后才能执行}function doC() {
    console.log("do c");
    eventManger.addHandler("A", function () {
        console.log("do a");
        doB();
    });
}
doC();

Dadurch wird es viel klarer. Bei Veranstaltungsabonnements müssen Sie sich nicht so viele Gedanken über den Ort des Anrufs machen. Das Obige speichert lediglich die letzten Aufrufparameter, die zum Auslösen nachfolgender abonnierter Ereignisse verwendet werden können. Dies eignet sich für einmalige Ereignisse (Ereignisse, die nur einmal pro Zyklus ausgelöst werden). Wenn es sich um ein Ereignis wie eine Push-Nachricht handelt, wird es kontinuierlich ausgelöst. Wenn Sie sicherstellen möchten, dass Sie alle Verlaufsdatensätze erhalten, müssen Sie sich alle Parameter merken. Dies ist eine Situation; es kann tatsächlich mehr Prozessabhängigkeiten geben, es gibt viele Möglichkeiten zur Prozesssteuerung

und es gibt viele Bibliotheken, die dies unterstützen. Wie Promise und Async. In diesem Artikel wird lediglich ein prozessbezogenes Szenario von Ereignissen und Methoden erläutert, das für Sie möglicherweise inspirierend ist.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Detaillierte Erläuterung der Verwendung benutzerdefinierter dynamischer Komponenten in Vue

Die Verwendung von protobuf.js und Long.js Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonSo veröffentlichen Sie zuerst JS-Ereignisse und abonnieren sie dann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!