Question

我目前正在使用AJAX＆amp; amp;的JavaScript ..

我对聪明人有一个快速的问题..

如何将下面的代码转换为定时事件而不是OnClick事件。

**例如我想每隔5秒刷新一次“showlist”DIV ......

我知道这是有效的代码并且违反了网站的规则，但是如果我发布我的非工作代码，它会让我感到困惑，因为它有我...

我想慢慢了解基础知识:)。

非常感谢任何指导

<!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>

Answer 1

您可以更改loadXMLDoc功能以使用setTimeout。考虑这个例子：

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);
}

函数发出AJAX请求并设置5s超时。我还添加了基本的onerror回调以清除计时器以防万一。

Answer 2

我曾制作过一种电视，它会在3秒后自动改变'屏幕'。

也许你可以重复使用我的代码？

// This is the div called myScreen
var myScreen = document.getElementById('myScreen');
// This is an array, which is holding the names of the pictures
var myPics = ['img-screen1.png','img-screen2.png'];
// This is looking at how many things the array holds
var totalPics = myPics.length;
// Now this is where the magic begins, this keeps looping around and around, and 
// makes sure all the pictures are being showed, 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();

我希望你能为你的项目重复使用它，我希望你能理解我的意思，如果我需要澄清，只要问我:)。

所以你需要做的是，当你的名单中有新项目时刷新数组。

Answer 3

此函数（如果在loadXMLDoc fn之后置于相同的脚本标记内）将执行并调用您的函数，然后每5秒（递归）再次调用它。您可以改为调用setInterval，但如果js引擎忙，则会冒着偶尔错过循环的风险：

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

将函数def包含在parens中，然后将（）跟随（）称为立即调用的函数表达式。

有关背景信息，请参阅此问题：What do parentheses surrounding a object/function/class declaration mean?

使用JavaScript和＆amp ;;将OnClick事件转换为定时事件AJAX

3 个答案: