Converting a Click Event to a Scheduled Event using JavaScript and AJAX

Question

Converting a Click Event to a Scheduled Event using JavaScript and AJAX

Currently delving into the world of AJAX & JavaScript, I have a question for the knowledgeable individuals out there.

I am curious to know how I can transform the code below from an OnClick event to a timed event.

For instance, I would like to refresh the content of the "showlist" DIV every 5 seconds...

I am aware that posting working code is not permitted here, but sharing my non-functional code would only add to the confusion.

I am gradually grasping the basics and any help or advice would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<script>

function loadXMLDoc()
{

var xmlhttp;
if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
{

document.getElementById("showlist").innerHTML=xmlhttp.responseText;

}
}

xmlhttp.open("GET","playlist.php?t=" + Math.random(),true);
xmlhttp.send();

}
</script>
</head>

<body>

<h2>Ajax Testing...</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="showlist"></div>
</body>

</html>

javascript ajax

Answer 1

Answer №1

To enhance the loadXMLDoc function, you can incorporate the use of setTimeout. Take a look at this sample:

function loadXMLDoc() {

    var xmlhttp,
        timer;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("showlist").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.onerror = function() {
        clearTimeout(timer);
    };

    xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
    xmlhttp.send();


    timer = setTimeout(loadXMLDoc, 5000);
}

This function initiates an AJAX request and establishes a timeout of 5 seconds. Additionally, I included a basic onerror callback to reset the timer as needed.

Answer 2

To enhance the loadXMLDoc function, you can incorporate the use of setTimeout. Take a look at this sample:

function loadXMLDoc() {

    var xmlhttp,
        timer;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("showlist").innerHTML = xmlhttp.responseText;
        }
    };

    xmlhttp.onerror = function() {
        clearTimeout(timer);
    };

    xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
    xmlhttp.send();


    timer = setTimeout(loadXMLDoc, 5000);
}

This function initiates an AJAX request and establishes a timeout of 5 seconds. Additionally, I included a basic onerror callback to reset the timer as needed.

Answer 3

Answer №2

Back in the day, I created a custom television that would change its 'screen' every 3 seconds automatically.

If you're interested, feel free to take a look at my code below:

// This is the div called myScreen
var myScreen = document.getElementById('myScreen');
// This is an array containing picture names
var myPics = ['img-screen1.png','img-screen2.png'];
// Checking the number of items in the array
var totalPics = myPics.length;
// The function that loops through and displays each picture one by one
var i = 0
function loop() {
    if(i > (totalPics - 1)){
        i = 0;
    }
    myScreen.innerHTML = '<img src="images/'+myPics[i]+'">';
    i++;
    loopTimer = setTimeout('loop()',3000);
}
loop();

Feel free to adapt this code for your own project. If you have any questions or need clarification, don't hesitate to reach out :).

Remember to update the array whenever you add new items to your showlist!

Answer 4

Back in the day, I created a custom television that would change its 'screen' every 3 seconds automatically.

If you're interested, feel free to take a look at my code below:

// This is the div called myScreen
var myScreen = document.getElementById('myScreen');
// This is an array containing picture names
var myPics = ['img-screen1.png','img-screen2.png'];
// Checking the number of items in the array
var totalPics = myPics.length;
// The function that loops through and displays each picture one by one
var i = 0
function loop() {
    if(i > (totalPics - 1)){
        i = 0;
    }
    myScreen.innerHTML = '<img src="images/'+myPics[i]+'">';
    i++;
    loopTimer = setTimeout('loop()',3000);
}
loop();

Feel free to adapt this code for your own project. If you have any questions or need clarification, don't hesitate to reach out :).

Remember to update the array whenever you add new items to your showlist!

Answer 5

Answer №3

If you include this code snippet within the same script tag after your loadXMLDoc function, it will automatically execute and call your function every 5 seconds in a recursive manner. Using setTimeout ensures that the function is called repeatedly without missing any cycles, unlike setInterval which may skip a cycle if the JavaScript engine is overloaded:

(function doMeSelf(){
    setTimeout(function(){
        loadXMLDoc();
        doMeSelf();
    },5000);
})();

By encapsulating the function definition within parentheses followed by (), it creates an immediately invoked function expression.

To understand more about this concept, refer to the following question: What do parentheses surrounding an object/function/class declaration mean?

Answer 6

If you include this code snippet within the same script tag after your loadXMLDoc function, it will automatically execute and call your function every 5 seconds in a recursive manner. Using setTimeout ensures that the function is called repeatedly without missing any cycles, unlike setInterval which may skip a cycle if the JavaScript engine is overloaded:

(function doMeSelf(){
    setTimeout(function(){
        loadXMLDoc();
        doMeSelf();
    },5000);
})();

By encapsulating the function definition within parentheses followed by (), it creates an immediately invoked function expression.

To understand more about this concept, refer to the following question: What do parentheses surrounding an object/function/class declaration mean?

Converting a Click Event to a Scheduled Event using JavaScript and AJAX

Answer №1

Answer №2

Answer №3

Similar questions

"How to change the hover background of a select element in Chrome from its default setting to something else

creating an interactive element that seamlessly integrates with a dynamic background image slideshow

Switching from constructors to Hooks in REACT

A guide on using jQuery to iterate through 3 separate div elements

The `forEach` method cannot be called on an undefined node.js

What is the most effective way to manage ajax requests that are time-consuming to finish?

How to show a placeholder in a select input using ReactJS

Resolve the Prototype_Pollution vulnerability detected by Checkmarx

showing sections that collapse next to each other

How can you include a key event handler that specifically looks out for the Space key being pressed?

Transform a list of file directories into a JSON format using ReactJS

Extracting Parameters using JQuery's load Method

Customizing the background color of rows in Node.js XLSX using the npm package

Unexpected obstacles encountered when implementing the jqTouch JavaScript/AJAX combination on Android

React- hiding div with hover effect not functioning as expected

Adjusting the shadow on the inserted image

Mastering the art of seamless navigation within a single page through the magic of

Float and tap

Using jQuery to create a Select All Checkbox that toggles a specific class

Undefined arguments are causing issues in the Local Directive Vuejs