If function is called after x seconds

Here is a JavaScript code snippet that triggers different functions based on the number of clicks. For instance, clicking once triggers function1, while clicking twice triggers function2.

Now, how can I modify this code so that if I am in the stop_autoslide function for X seconds, I can automatically call the start_autoslide function?

<script>
    var count = 0;

function function1(){
    stop_autoslide();
    count++;
}

function function2(){
     start_autoslide();
     count = 0;
}

function slideShowClicks(){
     if(count == 0){
         function1();
     }else{
         function2();
     }
}
</script>

Answer №1

Utilize the setInterval method in your code.

setInterval(functionToCall, timeInMillis);

Answer №2

setTimeout(startAutoslide, 2000);

The startAutoslide function will be executed after a delay of 2 seconds (2000ms).

You can use the setTimeout return value to cancel the timeout if needed.

Note:

function startAutoslide(){
     slideShowFunction();
     setTimeout(startAutoslide, 2000);
}

This structure ensures that the startAutoslide function runs every 2 seconds once initiated by calling it from slideShowClicks for the first time.

Answer №3

enhance your stop_autoslide() method

  var timeout=setTimeout("start_autoslide()",3000); 

change the duration from 3000ms to 3 seconds

adjust the timing based on your preference

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

Creating a text box that displays an inverted input

Hello, I'm looking to create a text box where if I input 1 then 2, it will display 21. Then if I enter 3, it should show 321. I am currently using Vue.js on my front end. Here is what I have attempted so far: I experimented with methods such as watc ...

Navigate directly to the section on the page that discusses the hashtag

So, I have a unique scenario to address. I'm working with two div elements where only one should be visible at a time. Here's the situation: The first div serves as an introduction page with a button that hides it and reveals the second div. Th ...

Issue with close request on dialog box

Whenever an icon is clicked, a dialog box containing a form should appear. The purpose of this dialog box is to either add a new tab or delete a specific tab. In my implementation, I used ReactJS, Redux, and Material-UI for building the components. Even th ...

issue involving extension that interrupts downloads

Trying to develop a browser extension that can intercept downloads and automatically rename them. manifest.json: { "name": " Book Renamer", "description": "Automatically rename downloaded ebooks from gutenberg.or ...

Is there a way to remove CSS based on the generated HTML code?

Currently tackling a project in Next.js involving custom SCSS, Bootstrap SCSS, and React-Bootstrap. Struggling with the bloated size of our main.scss file due to unused CSS. After observing that 95% of the CSS is not utilized, I aim to eliminate all unnec ...

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

Optimizing your approach to testing deferred always

When creating test cases for code within a jQuery AJAX call's always method or in bluebird promises' finally function, it often involves the following structure: function doStuff() { console.log('stuff done'); } function someFunct ...

What methods and applications are available for utilizing the AbortController feature within Next.js?

My search application provides real-time suggestions as users type in the search box. I utilize 'fetch' to retrieve these suggestions from an API with each character input by the user. However, there is a challenge when users quickly complete the ...

Utilize JavaScript to submit the FORM and initiate the 'submit' Event

Hey there! Here's the code I've been working on: HTML : <html> <body> <form enctype="multipart/form-data" method="post" name="image"> <input onchange="test();" ...

What is the simplest method to create a scroller for engaging narratives?

I am in the process of creating a static but responsive storytelling website using HTML. My objective is to create an effect similar to this: https://i.stack.imgur.com/zIEpU.gif The idea is to have text on the left and a *.jpg image fixed on the right. As ...

Unable to load dynamic data in Angular 2 smart table

Currently, I am utilizing Angular 6 along with smart table by visiting this link: . Everything was functioning smoothly, until the moment I attempted to switch from static to dynamic data: The following code works perfectly and displays all the content ...

Open the CSV document

Why am I receiving an error stating ./vacancy-data.csv cannot be found when attempting to pass the csv file into the csvtojson npm package? The csv file is located in the same directory as the code below: var express = require('express'), route ...

Updating an image using AJAX and Flask

I have a situation in HTML where I need to constantly update an image file with the latest images that come in. Below is the Flask code snippet: @app.route('/uploads/update_file', methods=['GET', 'POST']) def update_file(): ...

Tips on showcasing a set number of elements from an array in React

How can I modify my code to display only a specific number of items from the 'portfolioComponents' array, starting at a designated index ('startArrayHere') and incrementing or decrementing that index based on user interaction? I've ...

Leveraging the power of node.js, express, and handlebars to seamlessly render multiple views within a

I'm interested in finding out if there is a way to render multiple views using the res.render() function or another method. In the home.handlebars file, I currently have the following code: <h1>Home</h1> and I would like to display it i ...

Encountering difficulties with managing the submit button within a ReactJS form

As I work on creating a User registration form using React JS, I encounter an issue where the console does not log "Hello World" after clicking the submit button. Despite defining the fields, validations, and the submit handler, the functionality seems to ...

Leveraging generics within TypeScript

I have developed a class in TypeScript that uses generics. export class ModelTransformer { static hostelTransformer: HostelTransformer; static fromAtoB(instance: T): U { if (instance instanceof HostelType) { return ModelTrans ...

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

In my code, there is an object named curNode with the following structure: { "name": "CAMPAIGN", "attributes": {}, "children": [] } I am attempting to add a new node to the object like this: curNode!.children!.push({ name: newNodeName, ...

Encountering difficulties in loading my personal components within angular2 framework

I encountered an issue while trying to load the component located at 'app/shared/lookup/lookup.component.ts' from 'app/associate/abc.component.ts' Folder Structure https://i.stack.imgur.com/sZwvK.jpg Error Message https://i.stack.img ...

css background is repeating after the height of the div is reset

I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize ...