Is there a way to adjust this callback function in order to make it return a promise instead?

This script is designed to continuously attempt loading an image until it is successful:

function loadImage (url = '', callback = () => {}) {
  utils.loadImage(url, () => {
    callback()
  }, () => {
    loadImage(url, callback)
  })
}

In order to make it return a Promise, the following adjustment was made:

function loadImage (url = '', callback = () => {}) {
  return new Promise((resolve, reject) => {
    utils.loadImage(url, () => {
      // where should we utilize resolve and reject?
      callback()
    }, () => {
      loadImage(url, callback)
    })
  })
}

The challenge now is determining the correct placement for resolve and reject...

Answer №1

function fetchImage(url) {
  return new Promise(resolve => {
    utils.fetchImage(url, resolve, () => {
      fetchImage(url).then(resolve);
    });
  });
}

Note: An improved version suggested by Bergi can be seen below:

function fetchImage(url) {
  return new Promise(resolve => {
    utils.fetchImage(url, resolve, () => resolve(fetchImage(url)));
  });
}

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

Using NodeJS to perform asynchronous tasks with setImmediate while also incorporating private class

Today marks my first time experimenting with setImmediate. I've come to realize that it may not be able to run private class methods. Can someone shed some light on this? Why is that the case? Not Functioning Properly When trying to use a private cl ...

Retrieve vuex state in a distinct axios template js file

I have encountered an issue with my Vue project. I am using Vuex to manage the state and making axios requests. To handle the axios requests, I created a separate file with a predefined header setup like this: import axios from 'axios' import st ...

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

Convert a multidimensional array into a string using JavaScript

Currently, I'm in the process of generating an invoice for a collection of books and my intent is to submit it using ajax. However, when attempting to json encode the array of books within the invoice, I am encountering a setback where the value keeps ...

`questioning the unusual behavior of document.onload(), seeking answers`

Before delving into this, let's avoid downvoting as this is not another typical question about window.onload vs document.onload. window.onload triggers once all DOM nodes are fully loaded, while document.onload triggers when all DOM nodes are ready w ...

Exploring the wonders of LoopBack querying

Discovering loopback has been an enlightening experience for me. However, as I delve deeper into its functionalities, I've stumbled upon something unexpected. I noticed that when executing queries, such as using the updateAll method, if a parameter i ...

What is the most effective method for discerning the availability of fresh data?

Many highload websites are able to notify their users of new messages or topics in real-time without the need for page refreshing. How do they achieve this and what approaches are commonly used? There appear to be two main methods: Continuously querying ...

transferring iterative information via ajax data flow

My form includes hidden input fields that are manually declared in the AJAX data without a loop. How can I efficiently loop through them in the AJAX data? Below is my form script: <form method="POST" name="myform"> <?php for($i=1;$i<=5;$i+ ...

"Unlocking the Power: Sending a Complex JSON Object to PHP from the Dojo

Trying to send a complex JSON object to the server using PHP, but encountering difficulties in sending it. Here is the code snippet: Snippet from DOJO: var ObjArry=[]; var test1 = {key:value, key:value, key:value, key:value}; var test2 = {key:value, ...

Preventing Internet Explorer from automatically scrolling to the top of the page when a new HTML element is dynamically inserted using

On my webpage, I have an ASP:Grid with a small copy button in each row to copy the text inside that cell. The javascript function I created for copying the text is as follows: var copyText = function (textToCopy) { $(".copy").append("<textarea id=&ap ...

Each slider only displays a single database entry

I have an array that retrieves testimonials from a database table and displays them using a foreach loop. I am looking to implement a slider that can fade in and fade out the results. Here is my database query: $showTestimonials = array(); $getTestimoni ...

Adjust the menu scrollbar position to the right or limit scrolling to within the menu area

$(function() { "use strict"; $(".navbar-toggler").on("click", function() { $(".navbar-toggler").toggleClass("collapsed"); $(".offcanvas-collapse").toggleClass("open"); let menuposition = $("#toggler").offset().left + $("#toggler").width() + ...

Javascript malfunctions upon refreshing the div

After updating data with an ajax function and refreshing the div, I encountered an issue where the jQuery elements inside the div break. How can this be resolved? function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]&apo ...

What is the best way to run a promise once the endpoint has responded?

Is it possible to fulfill a promise after the response has been sent to the browser without using await? I must convert a video and save the output file in the operating system. For performance reasons, I want to avoid using await. Here's an example: ...

What is the best way to designate unique custom login redirects based on user type?

I am facing a challenge that I can't seem to overcome. Part of the issue is my struggle to articulate it effectively with the right terminology. As a newcomer in this field, please forgive me for posing such a clumsy question. Below is an outline of ...

Replace the indexOf() method to be called on a null value

I have discovered a way to override functions in JavaScript, such as indexOf(), like this: var indexOf = String.prototype.indexOf; String.prototype.indexOf = function(){ //MY CUSTOM CODE HERE return indexOf.call(this, arguments); }; By doing this ...

Angular 4 with Universal: Implementing 404 Status Code in Header for /404 Page Component

After researching and reviewing numerous StackOverflow inquiries, I have come to the conclusion that headers are derived from responses served by servers, making it a non-issue. I attempted to rectify the situation from my server.ts file but unfortunately ...

Constructing hierarchical objects in JavaScript

I am looking to create a complex nested object in JavaScript that follows a specific structure. const data = { name: 'Context 1', children: [ { name: 'Option 1', children: [ { name: 'Context&ap ...

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

Updating/Timer feature for a single feed out of two -- Combining data with $q.all()

I'm revisiting a question I previously asked here. The approach I took involved using the $q.all() method to resolve multiple http calls and then filtering and merging the data. Everything was working fine, but now I want to refresh one of the feeds ...