Increased wait time during initial execution

Currently facing an issue with delaying the first run of a function. I've developed a basic slideshow that is causing problems due to this delay in the initial run.

My goal is to have the first run wait for 10 seconds and then maintain a 4-second delay between the subsequent images.

Here is the code I am using:

function slideshow() {

    $("#slideshow .slide:hidden:first").fadeIn(1000).delay(4000).fadeOut(1000, function() {
        $(this).appendTo($(this).parent());
        slideshow();
    });

}

$(document).ready( function () {

    $("#slideshow .slide").hide();
    slideshow();

});

I have attempted various solutions but none have been successful so far.

I believe jsfiddle may not be required for resolving this issue, but if you think otherwise, please let me know!

Thank you in advance!

javascriptjqueryhtmlcss

Answer №1

If you're in search of Javascript's pre-installed setTimeout function, it establishes a timer and runs the provided code once the timer is completed. Within your $(document).ready() function, consider implementing this:

 setTimeout( slideshow, 10000);

By doing this, the execution of your slideshow function will be delayed for a total of 10 seconds. For more information, visit the documentation here

Answer №2

Implement a delay in the initial invocation of your slideshow feature. The setTimeout function takes the second argument as the number of milliseconds to pause before running the code provided. For instance, 10,000 milliseconds equates to a 10-second delay.

$(document).ready( function () {
    $("#slideshow .slide").hide();
    setTimeout(function(){slideshow();},10000);
});

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 Selenium Webdriver to simulate pressing ‘ctrl + t’ for opening a new tab in Javascript

I have been utilizing Selenium Webdriver to conduct testing on a web application that is currently undergoing development. Despite having developed multiple tests already, I am facing challenges in attempting to open new tabs within the window controlled b ...

javascriptseleniumselenium-webdrivertabssendkeys

What is the best way to display only the host and pathname of the links generated by Array.map()?

I am currently utilizing Array.map() to display a list of files in cache: <div data-offline></div> <script> var version = 'v1:'; if (navigator && navigator.serviceWorker) { caches.open(versio ...

javascript

transform the outcome of a $lookup operation into an object rather than an array

When performing a $lookup from a _id, the result is always 1 document. This means that I would like the result to be an object instead of an array with one item. let query = mongoose.model('Discipline').aggregate([ { $match: { ...

javascriptnode.jsmongodbmongoose

Using jQuery validation to verify that a minimum of one radio button holds a true value

I have a form with two questions. The first question asks if the product value exceeds a certain fixed amount, and the second question asks if the product value is below that fixed amount. Upon submitting the form, validation should ensure that at least on ...

javascriptjqueryhtmlvalidationjquery-validate

Refresh the view seamlessly using Ajax without reloading the page

When a button is clicked, the following code will run: $.ajax({ type: "POST", url: base_url+"/controller/method", data: {val: value}, success: function(data){ data = jQuery.parseJSON(dat ...

javascriptjqueryajax

The Google Maps application is experiencing an issue with rendering maps

Here is my code without the google map key. I am not receiving any errors, but the map is not showing up. What could I be missing? To test it out yourself, you will need to add your own map key which you can obtain from here. <!DOCTYPE html> <h ...

javascriptjquerygoogle-maps

The selection box for cities is not filling in with options

I am working on a dynamic city loading feature for a select tag in HTML. After selecting a state, I want to load the cities using an ajax call. While I am successfully logging the returned data to the console, I am struggling with populating the select op ...

phpjqueryhtmlajaxhtml-select

Dynamic CSS sizing

Currently, I am in the process of creating a component and my goal is to achieve a specific layout without the use of JavaScript, preferably utilizing flexbox. Essentially, envision a messenger chat screen with a header and footer containing controls. htt ...

cssflexbox

Animation using jQuery is functional on most browsers, however, it seems to

After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...

javascriptjqueryhtmlcsssafari

The issue of gallery image loading with the galleryView jQuery plugin is causing problems

Hi fellow developers, I could really use some assistance. I've been working on implementing the jquery galleryview plugin for my image gallery (check out my gallery here). Unfortunately, I'm running into an issue where the gallery is not loading ...

phpjavascriptjquery

The output is: [object of type HTMLSpanElement]

<form> <table> <tr> <td>Distance:</td> <td><input type="number" id="distance" onKeyUp="calculate();">m</td> </tr> <tr> <td>Time:</td> ...

javascripthtml

What could be the reason for the database variable being undefined in the Ajax-called PHP script?

Whenever I attempt to delete a post by clicking on .deletePost, I encounter the following issues. It appears that $mysqli is deemed as undefined, even though I employ it in a similar php script without any errors. This situation has left me perplexed, so c ...

phpjqueryajax

Using Flexbox CSS to Expand a Box According to its Content Size, Without Impacting Adjacent Rows

Is there a way to make the bottom-most row (highlighted in yellow) expand downward to fill available space? Check out this link for reference: https://jsfiddle.net/darrengates/oucvnfke/ I initially thought using: flex: auto; would solve the issue. Whil ...

javascriptjqueryhtmlcssflexbox

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

The issue of `function.prototype` not functioning correctly when used alongside `module

I have a file that contains a current function implementation function bar(){ /*Code goes here*/ } bar.prototype.method = function(param){ /*Some code*/ return this } module.exports = bar In the test file, I encountered some issues, let y = requir ...

javascriptclassnpmmodulenode-modules

Combining package.json commands for launching both an Express server and a Vue app

I recently developed an application using Vue.js and express.js. As of now, I find myself having to open two separate terminal windows in order to run npm run serve in one and npm start in the other. My ultimate goal is to streamline this process and have ...

javascriptexpressvue.jsnpmnpm-scripts

Creating dynamic JSON endpoints using JSP with Spring MVC

When working with JSON in my webapp, I have successfully passed a variable wordId to the Spring-mvc Controller using a static URL. However, I am unsure of the best practice for dealing with dynamic or parametric URLs. Controller Section: @RequestMapping( ...

javajqueryjsonjspspring-mvc

Transforming HTML code into a structured object

The provided code snippet includes HTML markup that needs to be transformed into a specific format. <html> <head> <title>Hello!</title> </head> <body> <div class=”div1”> <h1>This is a ...

javascriptarrayshtmlobject

What is the best way to execute a sequence of consecutive actions in a protractor test?

To achieve logging in, verifying, and logging out with multiple users, I decided to use a loop. I came across a helpful post that suggested forcing synchronous execution. You can find it here. Below are the scripts I implemented: it('instructor se ...

javascriptseleniumasynchronouscallbackprotractor

What is the best way to incorporate this code snippet into an object's value?

Is there a way to merge the headStyles object into the headText object? I have already injected the headStyles object into headConfig. import { makeStyles } from '@material-ui/core' const headStyles = { backgroundColor:'green', ...

javascriptreactjsobjectmaterial-uikey-value