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

Next.js | Error: Attempting to access a property of an undefined value (property name: 'secret')

Preventing JQuery from interrupting asynchronous initialization

What is the best way to fetch JSON data in React from the start and then manipulate it as needed before exporting to another file within my application?

Ways to enhance the appearance of the parent element when the radio button is clicked

Get alerts from Twitter pushed to my site

npm encountered an error while trying to install selenium-webdriver using the npm install command

Learn how to efficiently pass multiple props using a loop in Vue

Implementing a function to specify size limits

Tips for sending attributes to jQuery autocomplete

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Removing users from a Socket.IO chat room using Node.js

Is your blockui overlay failing to cover the entire page?

exploring the ins and outs of creating computed properties in TypeScript

Error with Google Maps Display

What error am I making in the Date calculator for the select box using Javascript/jQuery?

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

Constant updating of webpage elements without the need for a complete page reload

When passing an array from jQuery to PHP using Ajax, the value displayed is simply "Array" instead of the actual

Developed a new dynamic component in VUE that is functional, but encountered a warning stating "template or render function not defined."

Instructions on how to dynamically show specific text within a reusable component by utilizing React and JavaScript