waiting for a task to be carried out

Question

waiting for a task to be carried out

Currently, I am working with a function called doSomething() which can be triggered by various DOM events. Is it feasible to listen not just for an event, but for the exact moment when this function is executed?

To clarify - I am unable to modify the original function and therefore, I am seeking a solution that does not involve attaching another function to each of those events individually.

javascript rxjs rxjs5 rxjs6

Answer 1

Answer №1

One way to override a function is by storing the original, overriding it with a new implementation, and then calling the original when needed. In this example, I have demonstrated this technique using rxjs, as indicated by the tags in the question.

const DO_SOMETHING_EVENT_NAME = 'doSomething called';

function doSomething() {
  console.log('doing something');
}


var doSomethingOriginal = doSomething;
window.doSomething = function () {
  var event = new Event(DO_SOMETHING_EVENT_NAME);
  document.dispatchEvent(event);
  doSomethingOriginal();
};

var observable = rxjs.fromEvent(document, DO_SOMETHING_EVENT_NAME);

observable.subscribe(() => console.log('doing something else'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>
<button onclick="doSomething()">First</button>
<button onclick="doSomething()">Second</button>

Answer 2

One way to override a function is by storing the original, overriding it with a new implementation, and then calling the original when needed. In this example, I have demonstrated this technique using rxjs, as indicated by the tags in the question.

const DO_SOMETHING_EVENT_NAME = 'doSomething called';

function doSomething() {
  console.log('doing something');
}


var doSomethingOriginal = doSomething;
window.doSomething = function () {
  var event = new Event(DO_SOMETHING_EVENT_NAME);
  document.dispatchEvent(event);
  doSomethingOriginal();
};

var observable = rxjs.fromEvent(document, DO_SOMETHING_EVENT_NAME);

observable.subscribe(() => console.log('doing something else'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>
<button onclick="doSomething()">First</button>
<button onclick="doSomething()">Second</button>

Answer 3

Answer №2

Based on my understanding from this response, it seems that a solution requiring the implementation of "aspect oriented programming (AOP)" is necessary. You may find more information at https://github.com/cujojs/meld

Answer 4

Based on my understanding from this response, it seems that a solution requiring the implementation of "aspect oriented programming (AOP)" is necessary. You may find more information at https://github.com/cujojs/meld

waiting for a task to be carried out

Answer №1

Answer №2

Similar questions

Encountering a problem when looping through a JSON response

The craft of masonry is known for its creation of intentional gaps

Utilizing AngularJS to create a vertical calendar

The UI-Grid feature in Angular, when set to right-to-left (RTL) mode, incorrectly displays data in the opposite order compared to the

creating a multi-page form using HTML and JavaScript

The Puppeteer software does not automatically shut down the browser once the task is complete

Comparing the efficiency of Jquery draggable with thousands of elements versus updating the elements continuously

Having trouble with the addEventListener function not working on a vanilla JS form?

Can we not customize a nested component using the 'styled()' function in MUI?

Retrieving text from Node.js with the help of regular expressions

The functionality of Nodejs exec is malfunctioning

the navigate feature is not redirecting to the intended page as expected

The Clash of Form Action and JavaScript

Deliver JavaScript and HTML through an HTTP response using Node.js

There was an issue with the specified entry-point "auth0/angular-jwt" as it is missing required dependencies

Transmit the Selected Options from the Checkbox Categories

Tips for updating the state of an individual component in ReactJS without having to re-render the entire component

Retrieve data from two separate files and store it as a two-dimensional array in JavaScript

What is the best way to delay a method in vue.js?

Adding an HTML tag attribute to a Bootstrap 5 popover using the setAttribute() method: A Step-by