Creating a universal function to handle setTimeout and setInterval globally, inclusive of clearTimeout and clearInterval for all functions

Is it possible to create a universal setTimeout and setInterval function with corresponding clearTimeout and clearInterval for all functions while passing values to them?

The situation is as follows:

1. More than 8 functions utilizing setInterval for actions like fadeIn/fadeOut/toggleClass, etc.

2. More than 4 functions using setTimeout for actions like fadeIn/fadeOut/toggleClass, etc.

3. Only one function (setInterval/setTimeout) should be active at a time, switching to another once the current cycle finishes.

4. How can specific function values be passed/sent to these functions?

For example:

function one() { ... }
function two() { ... }
function three() { ... }
function four() { ... }
function five() { ... }

ctimeout = setTimeout(function(){ ... }, time);
sinterval = setInterval(function(){ ... }, time);

clearTimeout(ctimeout);
clearInterval(cinterval);

So, how do we assign functions to setInterval or setTimeout while ensuring only one runs at a time?

Answer №1

array_functions=['first','second','third']

for(var x=0;x<=length.array_functions;x++){
function pause(callback_remove){
  sinterval = setInterval(func[x],timer);
  callback_remove(sinterval);
 }
}

function callback_remove(parameter){
  clearInterval(parameter);
}

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

Tips for implementing event handlers on dynamically generated li elements in VueJS

Creating multiple ul elements using v-for in the following way <div v-for="item in info"> <ul> <li><a>{{item.number}}</a></li> <li><a>{{item.alphabet}}</a></li> </ul> </div&g ...

The occurrence of an error is triggered by the Jquery.ajax()

Here's a useful link for you to try out: If you take a closer look, you'll see that it takes the $_GET['fname'] parameter and outputs the content I need. I made an attempt at solving this: $.ajax({ type: 'GET', url: ...

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

Display a hoverable button for a singular element within an array during the process of mapping through the array

const ChatWidget = () => { const bodyRef = useRef(null) const [{messages,roomMessages,roomID,socket,user}, dispatch] = useStateValue() const [dropdown, setDropdown] = useState(false) useEffect(()=>{ const setScreen = () =>{ bodyRef.cur ...

What is the process to subscribe and obtain data from a server-to-user channel using pusher-js?

I am currently hosting my application using next.js on Vercel. I want to integrate Pusher to provide real-time messages to users in a private and secure manner. Despite successful log entries, I am facing challenges in subscribing to the channel and retrie ...

Accessing the locally stored data and displaying it in ng-bind

My journey to learn javascript through this project has hit a roadblock. I have stored an exchange rate in local storage: localStorage.gbpUSD = "1.42746"; Now, I want to utilize it instead of the hardcoded exchange rate in the code below... <input t ...

How to refresh an image in Next.js using setState even when the src path remains unchanged

Define a state variable: const [picture, setPicture] = useState(null); Assuming the picture is initially set to "123" and even after updating the image, the value remains "123". How can I reload the Image? <Image src={profileurl + picture} alt="profile ...

What is the expected return type in TypeScript of a function that returns a void function?

I recently received feedback during a code review suggesting that I add return type values to my functions. However, I am unsure of what return type to assign to this particular function: function mysteryTypeFunction(): mysteryType { return function() ...

Having a pair of submit buttons within a single form

I need assistance regarding a form with five file input controls and other various controls. Additionally, there are two submit buttons included within the form structure. Utilizing the JQuery Validation plugin for validating form inputs has been an essen ...

The issue with the <Button> component not properly linking in next.js

Having trouble with a button wrapped inside a custom Navbar component. The code snippet in question is: <NavBtn> <Link href="/contact" passHref> <Button> Contact Me </Button> </Link> & ...

What causes my slider to speed up with an increase in items and slow down with fewer items in bxslider?

Find more information here jQuery('.homepage_slider').bxSlider( { minSlides: 1, maxSlides: 4, slideWidth: 200, slideMargin: 30, ...

Configuring headless unit testing with requirejs

Seeking a JavaScript unit testing environment, I feel like I'm on a quest for the Holy Grail. The criteria are as follows: testing Requirejs AMD modules isolating each module by mocking out dependencies ability to test in-browser during development ...

Conceal certain digits of a credit card number in a masked format for security purposes

Is there a reliable method to mask Credit Card numbers in password format within a text field? **** **** **** 1234 If you are aware of a definitive solution, please share it with us. ...

JavaScript: Discovering the art of "utilizing RESTful APIs"

After several years of coding in JS, I am now expanding my knowledge. I have noticed many job postings asking for familiarity with REST APIs and experience consuming RESTful services. I have a solid grasp on AJAX basics using both vanilla JS and jQuery. I ...

Are desktop values taking precedence over the mobile media query?

Currently, I am facing an issue with aligning icons (images) under each title on a page that lists various classes. The icon needs to be centered below the title on both desktop and mobile versions of the site. However, I have encountered a problem where u ...

Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...

Particular arrangement of a table

I am looking to create a responsive table that has a vertical left header row on mobile devices and a normal horizontal header row on desktop, like the following: Header 1 data data data Header 2 data data data Header 3 data data data Does anyone have ...

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'

I am currently working on a Next.js project and have successfully integrated Google Tag Manager (GTM) using the react-gtm-module package. Interestingly, everything works perfectly when the application is initially loaded in debug mode, regardless of the st ...

Transfer data via ajax to the controller

I need assistance with storing a file in my database using Tabulator without having a form already created. I am currently creating a simple input element like this: var editor = document.createElement("input");. After clicking the file, it trigg ...

Personalize the width of the columns

My SharePoint Online HTML code is as follows: <div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Responsable" ctxnum="14" displayname="Responsable" fieldtype="User" ...