Invoke the onClick function within a setInterval loop

Question

Invoke the onClick function within a setInterval loop

My onClick function is functioning correctly. However, I want to run it periodically using setInterval after it's been triggered by a click event. Here's my attempt at modifying the code:

    var clickData;
    var isClicked=0;

    function onClick(e) {
      console.log("OnClick called")
      if(isClicked==0){
        clickData = this;
        isClicked = 1;
        console.log(clickData);
      }

      let empID = clickData.options.empID;
      let reqURL = baseurl  + API_KEY + "&MonitoringRef=" + empID;

      $.ajax({
          type: "GET",
          dataType: "jsonp",
          url: reqURL,
          success: success2,

        });

    }

    if(isClicked==1){
      var f = onClick;
      f.paramater1 = clickData;
      setInterval(f, 500); 
    }

    function success2(json2){
      console,log(json2);
      //Do something with json2...
    }

I made changes to calling the function from setInterval based on one of the solutions found here.

The issue seems to be related to passing parameters to the function. Is there a solution for this?

javascript ajax

Answer 1

Answer №1

The issue arose from establishing the interval within the function itself, leading to an endless cycle of interval calls which prevented it from functioning correctly. To work around this problem, you can implement the following solution:

Create a separate function and utilize setTimeout when calling it from onClick:

function onClick(e) {
   // Your onClick function implementation...

   // Incorporate this line in your onClick function to trigger the subsequent function that sets up the interval
   setTimeout( function() { startInterval(clickData); }, 1);
}

Within the startInerval function, you are able to invoke onClick; however, in order to avoid accumulating intervals, I introduce a flag to ensure that the interval is only created once:

var checkFlag = false;
function startInterval(clickData){
   if(checkFlag === false){
      checkFlag = true;
      setInterval(function(){onClick(clickData);}, 500);
   }
}

Answer 2

The issue arose from establishing the interval within the function itself, leading to an endless cycle of interval calls which prevented it from functioning correctly. To work around this problem, you can implement the following solution:

Create a separate function and utilize setTimeout when calling it from onClick:

function onClick(e) {
   // Your onClick function implementation...

   // Incorporate this line in your onClick function to trigger the subsequent function that sets up the interval
   setTimeout( function() { startInterval(clickData); }, 1);
}

Within the startInerval function, you are able to invoke onClick; however, in order to avoid accumulating intervals, I introduce a flag to ensure that the interval is only created once:

var checkFlag = false;
function startInterval(clickData){
   if(checkFlag === false){
      checkFlag = true;
      setInterval(function(){onClick(clickData);}, 500);
   }
}

Answer 3

Answer №2

To implement a function that runs twice per second when a button is clicked, you can add a click listener to the button and then remove it once the interval is set:

const btn = document.getElementById("SPECIFY-YOUR-BUTTON-ID-HERE")

const yourAction = () => {
    // Add the code here that needs to run twice per second
    btn.removeEventListener("click")
}

btn.addEventListener("click", () => {
    setInterval(yourAction, 500);
});

Answer 4

To implement a function that runs twice per second when a button is clicked, you can add a click listener to the button and then remove it once the interval is set:

const btn = document.getElementById("SPECIFY-YOUR-BUTTON-ID-HERE")

const yourAction = () => {
    // Add the code here that needs to run twice per second
    btn.removeEventListener("click")
}

btn.addEventListener("click", () => {
    setInterval(yourAction, 500);
});

Invoke the onClick function within a setInterval loop

Answer №1

Answer №2

Similar questions

Backbone "recalling" stored data in attributes

Floating action button within a collapsible panel

What are the latest advancements in using Java for AJAX technology?

The Vanilla JS script in Next.js fails to execute upon deployment

The Handlebars helper needs to provide a result when a value is present

PHP: Exploring the Power of Loop and Conditional Structures

Select multiple rows by checking the checkboxes and select a single row by clicking on it in the MUI DataGrid

I encountered an issue with passing arguments in the invoke function I redesigned

The power of ReactJS and the mysterious nature of 'this'

Internet Explorer 8 is not functioning

Issue with Backbone Event Dropping Functionality

Deciphering the intricate mechanics behind _.bind

Having trouble getting my Leaflet map to display even after meticulously following the quick-start guide

Eliminating symbols such as $, @, and % from a string using jQuery

Integrating HTML, JavaScript, PHP, and MySQL to enhance website functionality

Tips on implementing nested ajax requests using jquery?

Executing tasks in a job on GitHub using Node.JS and .NET

resetting dropdown selections upon page refresh using jQuery and AJAX

Updating JSON data in Node.js by adding a new object

Waiting for data to be passed from a parent component within a method