Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

342
Views
Javascript : Call function and wait seconds then

I feel stupid because I do not find what I want to do...

It is in PURE Javascript.

I wan't to call a function, and stop it (or kill it, or whatever) next some seconds.

Here is my actual code :

function scrollThumbnails() {
    const thumbnails = document.querySelectorAll('.thumbnail');

    for (thumbnail of thumbnails) {
        thumbnail.classList.add('active');
        await verticalSlider(thumbnail);
        resetSliderPosition(thumbnail);
        thumbnail.classList.remove('active');
    }

    scrollThumbnails();
}

async function verticalSlider(element) {
    const slider = element.querySelector('.vertical-carrousel');

    const max = slider.offsetHeight - slider.parentElement.offsetHeight;

    var toTop = 0;

    while (toTop > -max) {
        await new Promise((resolve) => setTimeout(resolve, 50));
        toTop--;
        slider.style.top = toTop + 'px';
    }

   await new Promise((resolve) => setTimeout(resolve, 1000));
}

function resetSliderPosition(element) {
    const slider = element.querySelector('.vertical-carrousel');
    slider.style.removeProperty('top');
}

So here, i want to call 'verticalSlider' in my loop, but if it is over than 45 seconds, I want to stop it and go on the next thumbnail.

Is it possible ? Do I miss something ?

Thanks by advanced :)

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

This is simple example without async and await with manual timeout counter implementation.

// Function, which accepts time out value in seconds (counting from 0)
const myFunct = (timeOutSec) => {
  // Get current time
  const ct = Date.now();
  // Set counter for example function logic
  let secCounter = ct - 1000;
  // Start eternal loop
  while(true) {
    // Get in loop time
    const ilt = Date.now();
    
    // Compare current time and in loop time
    // If current time + timeout sec < in loop time, break it
    if(ct + timeOutSec * 1000 < ilt) break;
    
    // Here do main function logic in loop
    // for example, console log each second
    if(ilt - secCounter > 1000) {
      console.log(`time ${ilt}`);
      secCounter += 1000;
    }
  }
}

// Test running function for 4 sec
myFunct(3);
console.log(`Completed at ${Date.now()}`);

Or similar with promises

// Async timeout function
const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// Promise function which accepts timout value in seconds (counting from 0)
const myPFunct = (timeOutSec) => {
  return new Promise(async (resolve, reject) => {
    // Current time
    const ct = Date.now();
    // start eternal loop
    while(true) {
      // In loop time
      const ilt = Date.now();
      
      // Check in-loop time, current time and timeout
      if(ct + timeOutSec * 1000 < ilt) {
        resolve(`completed at ${ilt}`);
        break;
      }
      
      // Do something
      console.log(`time: ${ilt}`);
      // Wait 1 sec
      await timeout(1000);
    }
  });
}

// Test async function
const test = async () => {
  // Run myPFunct for 4 sec
  const result = await myPFunct(3);
  console.log(`Test function result: ${result}`);
}

// Run test function
test();

about 4 years ago · Juan Pablo Isaza Report

0

Thanks to @tarkh solution. If someone try to do an horizontal slider like me, or something with loop, I have to modify the code (because with the source solution, the resolve goes up to all the async methods).

Here is the final solution (I have to name the loop to break it and resolve the current promise - there are maybe simplest solution ?) :

    window.onload = function () {
        scrollThumbnails();
    }

    const scrollThumbnails = async () => {
        const thumbnails = document.querySelectorAll('.thumbnail');

        for (thumbnail of thumbnails) {
            thumbnail.classList.add('active');
            await verticalSliderWithTimeout(thumbnail, 45000);
            thumbnail.classList.remove('active');
        }

        scrollThumbnails();
    }

    const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));

    const verticalSliderWithTimeout = (element, timeoutDelay) => {
        return new Promise(async (resolve, reject) => {
            const currentTime = Date.now();

            const slider = element.querySelector('.vertical-carrousel');
            const max = slider.offsetHeight - slider.parentElement.offsetHeight;
            var toTop = 0;
            slider.style.top = toTop + 'px';

            sliderLoop: while (toTop > -max) {
                const inLoopTime = Date.now();

                if(currentTime + timeoutDelay < inLoopTime) {
                    break sliderLoop;
                }

            
                await timeout(50);
                toTop--;
                slider.style.top = toTop + 'px';
            }

            resolve();
        });
    }

HTML code if needed (Handlebars) :

<div class="thumbnail">
    <div class="photos-slider">
        <div id="vertical-carrousel" class="vertical-carrousel">
            {{#each this.photos}}
            <img src="/image/{{../this.agency.product_type}}/{{../this.agency.id}}/{{../this.reference}}/{{urlencode this}}"
                onerror="{{this}}" />
            {{/each}}
        </div>
    </div>
</div>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!