个人中心
gpt4 book ai didi

javascript - 为什么 AJAX 不能与 for 循环一起使用

转载 作者：行者123 更新时间：2023-12-02 17:08:44 24 4
gpt4 key购买 nike

我正在开发小型应用程序，该应用程序应该生成工作计划并计算时间:http://www.ankieta.gorna.pl/kalendarz.php 。我编写了函数 kalkulacja() ，该函数应该通过 ajax 计算每一行的输入和输出结果。我不明白为什么它只执行最后一行，在之前的所有情况下都会抛出错误。我将非常感谢您的帮助。

<body onload="init();">
    <div class="container">
            <button type="button" id="tydz_minus" name="tydz_minus"><</button>
            <button type="button" id="tydz_plus" name="tydz_plus">></button>
        <table id="tabela">
            <thead>
                <tr>
                    <td></td>
                    <td class="tydz" id="pon"></td>
                    <td class="tydz" id="wt"></td>
                    <td class="tydz" id="sr"></td>
                    <td class="tydz" id="czw"></td>
                    <td class="tydz" id="pn"></td>
                    <td class="tydz" id="sob"></td>
                    <td class="tydz" id="ndz"></td>
                    <td>tydz.</td>
                    <td>miesiąc</td>
                </tr>
            </thead>
            <tbody id="tbody">
                <?php
                    $dane = $_POST["staff"];
                    $link = mysqli_connect("") or die("Error " . mysqli_error($link));

                    if($link) {
                        echo "";
                    } else {
                        echo "nie ok";
                    }
                    $result = mysqli_query($link,"SELECT staff FROM Staff");
                    while($row = mysqli_fetch_array($result)) {
                    $pracownik = $row['staff'];
                    print "<tr><td>" . $pracownik . "</td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td><input id='time' type='text'><input id='time' type='text'></td><td id='ww'></td><td></td></tr>";
                    }
                ?>
            </tbody>
        </table>        
            <input name="staff" id="staff" type="text"/>
            <input type="submit" value="Dodaj pracownika" onclick="save_staff();"/>
    </div>
        <script>
        $(document).ready(function() {
        $('#tbody tr td #time').datetimepicker({
        datepicker:false,
        format:'H:i'
        }); });
    </script>
</body>



function init() {
    var zlap_plus = document.getElementById("tydz_plus");
    var zlap_minus = document.getElementById("tydz_minus");
    zlap_plus.onclick = plus_tydz;
    zlap_minus.onclick = minus_tydz;
    dni();
    for(var e = 0 ; e < 19 ; e++) {
    kalkulacja(e); }
}
var dzis = new Date();
var day = 86400000;
var pon = Date.now() - ((dzis.getDay()*day)-day);                       //zwraca pierwszy dzień tygodnia
var pierwszy = Date.now() - ((dzis.getDate() - dzis.getDay())*day);     //zwraca pierwszy dzień miesiąca
//Funkcja tworzy nagłówek tabeli i generuje daty
function dni() {
                document.getElementById("pon").innerHTML = "<div id='cell'>" + new Date(pon).toLocaleDateString() + "</div>";
                document.getElementById("wt").innerHTML = new Date(pon + day).toLocaleDateString();
                document.getElementById("sr").innerHTML = new Date(pon + (2*day)).toLocaleDateString();
                document.getElementById("czw").innerHTML = new Date(pon + (3*day)).toLocaleDateString();
                document.getElementById("pn").innerHTML = new Date(pon + (4*day)).toLocaleDateString();
                document.getElementById("sob").innerHTML = new Date(pon + (5*day)).toLocaleDateString();
                document.getElementById("ndz").innerHTML = new Date(pon + (6*day)).toLocaleDateString();
}
//Funkcja przesuwa kalendarz o tydzień
function plus_tydz() {
                pon = pon+7*day;
                return dni();

            }
//Funkcja cofa kalendarz o tydzień
function minus_tydz() {
                pon = pon-7*day;
                return dni();

            }
//Funkcja tworzy nowy obiekt ajax
var ajax = createXmlHttpRequestObject();
function createXmlHttpRequestObject() {
            var ajax;

            if(window.ActiveXObject) {
                try {
                    ajax = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {
                    ajax = false;
                }
            }
            else {
                try {
                    ajax = new XMLHttpRequest();
                } catch(e) {
                    ajax = false;
                }
            }
            if (!ajax) 
                alert("Nie uadło się utworzyc obiektu");
            else 
            return ajax;
    } 
//Funkcja zapisuje w bazie danych nowego pracownika via ajax
function save_staff() {
    if(ajax) {
        var staff = document.getElementById("staff").value;
        var dane = "staff=" + staff;
        ajax.open("POST", "kalendarz_dane.php", true);
        ajax.onreadystatechange = handle;
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        ajax.send(dane);
    }

}
//Funkcja obsługuje odpowiedź serwera z funkcji save_staff
function handle() {
        if(ajax.readyState == 4) {
            if(ajax.status == 200) {
                try {
                    document.getElementById("tbody").innerHTML = ajax.responseText;
                }catch(e) {
                    alert(e.toString());
                }
            } else {
                alert(ajax.statusText);
            }
        }
    }
function kalkulacja(e) {
    var cal = 0;
    var len = document.getElementById("tbody").rows.length;
    for(var i = 1 ; i < 8 ; i++) {
        var x = document.getElementById("tbody").rows[e].cells[i].children[0].value;
        var y = document.getElementById("tbody").rows[e].cells[i].children[1].value;
        var timeStart = new Date("01/09/1970 " + x).getTime();
        var timeEnd = new Date("01/09/1970 " + y).getTime();
        var workday = (timeEnd - timeStart) / 3600000;
        cal += workday; }
    if(ajax) {
        var mk = "cal=" + cal;
        ajax.open("GET", "kalendarz_time.php?cal=" + cal, true);
        ajax.onreadystatechange = handletime;
        ajax.send(null);
    } else {
        setTimeout(kalkulacja(e), 2000)
    }
    function handletime() {
        if(ajax.readyState == 4) {
            if(ajax.status == 200) {
                try {
                    var s = 8 + (e*10)
                    document.getElementById("tbody").getElementsByTagName("td").item(s).innerHTML = ajax.responseText;
                    setTimeout(kalkulacja(e), 2000);
                }catch(e) {
                    alert(e.toString());
                }
            } else {
                alert(ajax.statusText);
            }
        }
    }

}

最佳答案

这一行:

setTimeout(kalkulacja(e), 2000)

应该是:

setTimeout(function() {
    kalkulacja(e);
}, 2000);

按照您编写的方式，它会在您设置超时时调用 kalkulacja，而不是在计时器到期时调用。

不过，主要问题是每次调用 kalkulacja 时都使用相同的 ajax 对象。如果您进行多个并发 AJAX 调用，则需要为每个调用使用不同的 XMLHttpRequest 对象。所以 kalkulakja 应该这样开始:

var ajax = createXmlHttpRequestObject();

这样你每次都会得到一个新的。

关于javascript - 为什么 AJAX 不能与 for 循环一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25013599/

24 4 0
文章推荐： javascript - CoffeeScript 类变量可见性
文章推荐： hive - 如何在 HIVE 中找到多个值的最小值？
文章推荐： hbase shell 不能使用 : ERROR: KeeperErrorCode = NoNode for/hbase/master
文章推荐： javascript - 添加了复选框，找不到 ('checkboxgroup' )
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com