eliminating the existing listener directly from EventM

Let's say I need to create an event listener with ghcjs-dom that triggers on a click and then removes itself.

I have

addListener :: (IsEventTarget t, IsEvent e)
            => t -> EventName t e -> SaferEventListener t e -> Bool -> IO ()
removeListener :: (IsEventTarget t, IsEvent e)
            => t -> EventName t e -> SaferEventListener t e -> Bool -> IO ()

for adding and removing, and

newListener :: (IsEvent e) => EventM t e () -> IO (SaferEventListener t e)

to create the listener using an EventM. How can I get access to the SaferEventListener (which will be constructed later) from within the EventM, so I can remove it when the event occurs?

In JavaScript, you typically use a named function expression as your callback for addEventListener, and then apply removeEventListener to that name inside the callback function. However, it seems there is no direct equivalent here. Am I missing something?

Answer №1

Utilize the function fixIO

fixIO $ \rec -> newListener _eventm

Insert your EventM into _eventm, and you will gain access to the event listener that will be created later with the name rec. Even before the execution of newListener, you can interact with rec, but it's important not to attempt forcing it with seq or anything stronger, as this may lead to an infinite loop. Stick to what you're doing, and you should be okay.


fixIO is an extension of fix:

-- recursion essence
fix :: (a -> a) -> a
fix f = let x = f x in x

(fix (\fact n ->
  if n <= 1 then 1 else n * fact (n - 1)
)) 3 = 6

repeat = fix . (:)
repeat 1 = fix (1:) 

-- additional power
fix id = let x = id x in x

fixIO :: (a -> IO a) -> IO a
fixIO f = _

fixIO (\xs -> return $ 1:xs) = return [1,1,1,1,1,1,1,1,1,1...]

The concept behind <code>fix is enabling a function to access its final result even before it is actually generated.
On the other hand, fixIO allows an IO function to access its eventual outcome before its creation while performing some IO tasks. Additionally, fixIO only executes these actions once, hence why the initial definition of fix (calling f just once) is more pertinent than the second one. Furthermore, fixIO is categorized as a specialization of mfix :: MonadFix m => (a -> m a) -> m a, where MonadFix encompasses monads like IO, with mfix = fixIO, endorsing such interlocking semantics. GHC supports "recursive do" syntax for any MonadFix:

{-# LANGUAGE RecursiveDo #-}
someCode = mdo ...
               listener <- newListener _eventm
               ...

someCode = do ...
              rec listener <- newListener _eventm
              ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to send image file and string via XHR is causing issues

This task may seem straightforward, but I've been struggling with it for hours. My goal is to upload an image file along with stringified coordinates to crop the image on the server-side. Below is my client-side code: var formdata = new FormD ...

Exploring GLTF models with Threejs - just a click away!

I am currently developing a project in three.js where I aim to load a GLTF file consisting of geometric shapes. My goal is to extract information, specifically the name, of the shapes that are clicked within the GLTF file. At this stage, I am using console ...

What strategies does NPM/WebPack employ to handle duplicate dependencies across different version ranges?

I am working on an application that relies on various packages, each with its own set of dependencies. For instance, my app may require package@^1.0.0, while another package it uses may demand package@^1.5.1. When I build the app for production, will both ...

Managing Events in Angular 2 and Creating Custom Event Handlers

Currently, I am in the process of developing a component library in Angular 2 for our app teams to utilize. One of the components I recently created is a modal, but I am encountering some accessibility challenges. Specifically, I want the modal to close wh ...

What is the best way to retrieve data in Vue from Node.js?

app.js router.get('/', (req, res) => { var cart = req.cookies.cart; res.sendFile(path.join(__dirname,'../../src/components/cart.html'),cart); }) shoppingCart.html <body> <div id="shop" class="container mt-3"&g ...

Implementing Google Places reviews on a website with the help of JavaScript

Struggling to display the Google reviews for my company on our website, I can't seem to make it work. I've attempted to use this code: <script> $(function() { var people = []; $.getJSON('https://maps.googleapis.com ...

Froala Editor: Innovative external toolbar that pops up when the button is clicked

In our project, we are implementing the latest version of Froala and aim to configure it so that the toolbar is activated by a separate external button, similar to Gmail where the editor initially does not display a toolbar. I attempted to modify the &apo ...

Building a dynamic form using React Material-UI Autocomplete and integrating it with react

I'm encountering an issue where the MUI Autocomplete is not displaying the selected fields even though the react-hook-form values have been updated. Here is the code snippet import { useForm, Controller, FormProvider } from "react-hook-form" ...

"Troubleshooting Image Loading Issues in Next.js: A Guide to Reloading Unresponsive

https://i.sstatic.net/FLdrA.jpgHello, I am facing an issue with rendering 300 images from IPFS data. Occasionally, around 3-4 of the images fail to load and result in a 404 error. Even after refreshing the page, these unloaded images remain inaccessible. I ...

Generating additional react-select dropdowns depending on the selection made in the initial dropdown menu

I am currently working on a travel website. I am in need of a dropdown menu for users to select the number of children they will be traveling with, with options for 1, 2, or 3. If the user chooses 1 child, then an additional react-select element should ...

Placing jQuery scripts in Blogger platform: A guide

After finding the correct codes to solve my problem in previous questions, such as How do I get an image to fade in and out on a scroll using jQuery?, I came across this helpful code snippet: var divs = $('.banner'); $(window).scroll(function(){ ...

Executing a message in Azure Service Bus using Javascript/Node.js

I am utilizing the @azure/service-bus library in a Node.js application to receive messages. The code I am using is as follows: const { ServiceBusClient } = require("@azure/service-bus"); const sbClient = new ServiceBusClient(connectionString); ...

What is the process for deleting a token from local storage and displaying the logout page in Next JS?

I developed a Next.js web application and am looking to display a logout page when the token expires, while also removing the expired token from local storage. How can I ensure that this functionality works no matter which page the user visits within the a ...

Using jQuery to evaluate multiple conditions within an if statement

I'm working on a script that needs to continuously monitor for the presence of an input field with the class name "email" (as this content is loaded via AJAX). If this input exists, I need to show another input field with the class name of "upload". A ...

Unfortunately, the input type number does not allow for the removal of decimal points

I need assistance with modifying the HTML code below. I want to remove the decimal point from the input field. Could anyone please provide instructions on how to accomplish this? <input type="number" min="0" step="1" ng-pattern="/^(0|[1-9][0-9]*)$/" ...

Obtaining IP Address with Jquery or Phonegap: A Guide for Cross Platform Development

Is there a way to retrieve the IP address using Jquery or Phonegap? I am currently working on an application that is compatible with Android, iPhone, and Windows platforms. I'm in need of a solution to locate the IP address of a request. ...

"Encountering issue with componentDidMount() not functioning as expected, despite debugger being

Hello everyone! This is my first time sharing something here, so I'm eager to hear your feedback on both how I've posted and the content itself. I've only been programming for 8 weeks now, so I'm sure there are plenty of mistakes in wha ...

The property 'createDocumentFragment' is not defined and cannot be read in JavaScript code

I'm working on loading data from my database using ajax, but I'm facing an issue with the this method not functioning as expected. Below is a snippet of my source code: $(".cancel-btn").click(function() { var cancelArea = $('.cancel&apos ...

transfer jquery element using jquery ajax

How can I send a jQuery object to a PHP function using POST? When I stringify the object, I get the following output: [ { "id": "701", "user_id": "2", "playlist": "ukg%20garage", "tracks": "5", "thumbnail": "Coldplay.jpeg", "crea ...

AngularJS fails to recognize Iframe element during REST request

I'm having trouble with my webpage only reading the Iframe tag. It's sending the content correctly according to Postman. Postman is giving me this content: "Conteudo": "<p>Test iframe:</p>\n\n<p><iframe framebord ...