How to publish JS events first and then subscribe-JS Tutorial-php.cn

This time I will bring you JSEventThe method of publishing first and then subscribing, implementing the JS event publishing first and then subscribingWhat are the precautions, the following is a practical case, let’s take a look take a look.

I wrote aneventmanager before, which is an ordinary subscribe first and publish later model. But in actual scenarios, we need to ensure that those who subscribe later can also receive published messages. For example, if we follow the WeChat public account, we can still see historical news. Similar to QQ offline messages, I will send them to you first, and you can receive them after logging in.It is to ensure that all methods that subscribe to the event can be executed.

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); } };

Copy after login

In fact, it just adds a few lines of code. Cache the parameters of the last trigger. Then make a judgment when adding handle. If there are already cached parameters when subscribing, it means that the method can be executed.

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); })

Copy after login

My actual scenario is that method B can only be executed after event A is triggered. But method B needs to be completed after method C. That is, B depends on the completion of A and C. And A will be triggered quickly almost every time. Of course, you can set up two switchesvariablesand an agent function, and then do B after both events are completed. The code is as follows:

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();

Copy after login

This function is implemented, but the readability is poor, and the event subscription must be in the right position. If it is before the trigger, doB will never be executed, and there are two more variables in the code and One method, the most stupid one is to use a variable plus setTimeout to determine thestatus, which may lead to a deadloop.

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事件触发迟

Copy after login

This method is the most undesirable. Because external events may cause failure, there is no way out here. It's like digging a hole. But if the event supports publishing first and subscribing later, the problem will be simple:

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();

Copy after login

This will be much clearer. Event subscriptions don’t have to worry so much about the location of the call. The above just remembers the most recent call parameters, which can be used to trigger subsequent subscribed events. This is suitable for one-time events (events that will only be triggered once per cycle). If it is an event like a push message, it will be triggered continuously. If you want to ensure that you can get all the history records, you need to remember all the parameters. This is a situation; there may actually be more process dependencies. Of course, there are many methods forProcess Control, and there are many library supports. Such as promise and async. This article only explains a process-related scenario of events and methods, which may be inspiring to you.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!