Question

我正在尝试创建一个JavaScript和PHP测验。代码很简单：如果单击了任何选项按钮，则使用ajax请求检查答案。它工作正常，但是在用户单击任何给定选项后，我希望问题在2秒后自动更改为新的Ajax请求。因此，我将SetInterval函数与load函数一起使用以加载新问题。现在主要问题在这里：当我单击任何一个选项按钮时，下一个问题就会出现，然后又出现。这个问题会一直抖动，好像是动画错误一样。那么在下面的代码中，这是错误的吗？

代码：（ CSS已删除）

index.php

<!DOCTYPE html>

<head>
    <title>Quiz</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">

    </style>
    <script src="jquery.min.js"></script>
    <script>
        function loadqn() {
            $('.optioncont').load('loadit.php?id=1');
        }

        function checkans(qid, optn) {

            $(".optioncont").css("opacity", "0.5");
            var id = qid + 1;
            alert(id);
            setInterval(function () { $('.optioncont').load('loadit.php?id=' + id); }, 2000);

            $.ajax({
                url: 'quiz.php',
                method: 'POST',
                data: {
                    qnid: qid,
                    ans: optn
                },
                success: function (data) {
                    if (data == 'C') {
                        $(".resultN").hide();
                        $(".resultY").show();
                        setInterval(function () { $(".resultY").hide(); }, 3000);
                    } else {
                        $(".resultY").hide();
                        $(".resultN").show();
                        setInterval(function () { $(".resultN").hide(); }, 3000);
                    }
                }
            });
        }


        $(document).ready(function () {
            $("#play").click(function () {
                alert('id');
                loadqn();
            });
        });

    </script>
</head>

<body>

    <div class="qncont">
        <button id="play">Play</button>
        <center>
            <div class="optioncont">
            </div>
            <div class="resultY">
                <div class="congrats">Correct Answer</div>
            </div>
            <div class="resultN">
                <div class="congrats">Wrong Answer</div>
            </div>


    </div>

</body>

</html>

loadit.php

<?php
$conn = mysqli_connect('localhost', 'root', 'bibek');
if (!$conn) {
    die("Database connection Failed" . mysqli_error($conn));
}
$select_db = mysqli_select_db($conn, 'test');
if (!$select_db) {
    die("Database selection falied" . mysqli_error($conn));
}

if (isset($_GET['id'])) {
    $qid = $_GET['id'];

    $query = mysqli_query($conn, "select* from `quiz` where id='$qid'");

    $row      = mysqli_fetch_array($query);
    $question = $row['question'];
    $option1  = $row['option1'];
    $option2  = $row['option2'];
    $option3  = $row['option3'];
    $option4  = $row['option4'];

    echo "<div class='question'>$question</div>";
    echo "<div class='option_block'><a href='#' class='option' onClick='checkans(" . $qid . ",1)'>$option1</a></div>";
    echo "<div class='option_block'><a href='#' class='option' onClick='checkans(" . $qid . ",2)'>$option2</a></div>";
    echo "<div class='option_block'><a href='#' class='option' onClick='checkans(" . $qid . ",3)'>$option3</a></div>";
    echo "<div class='option_block'><a class='option' href='#' onClick='checkans(" . $qid . ",4)'>$option4</a></div>";
} else {
    echo "error";
}
?>

Answer 1

SetInterval将以x毫秒的间隔重复调用您的函数。您应该使用Accessing QueryString in a custom AuthorizeAttribute或更好的setTimeout。

请注意，您可以分别用setInterval和setTimeout取消任何clearInterval或clearTimeOut。

Answer 2

正如@sjeiti所写，您应该使用setTimeout而不是setInterval。

之所以称您为抖动，是因为代码以ajax-call继续直到粘贴2秒为止。因此，您应该将ajax-call设置在第一个Timeout-function

中

    function checkans(qid, optn) {

        $(".optioncont").css("opacity", "0.5");
        var id = qid + 1;
        alert(id);

        //THE CODE WON'T WAIT FOR THIS TO COMPLETE 
        setInterval(function () { $('.optioncont').load('loadit.php?id=' + id); }, 2000);

        //IT WILL JUMP TO THIS PART WHILE IT'S WAITING FOR THE TIMEOUT
        $.ajax({
            url: 'quiz.php',
            method: 'POST',
            data: {
                qnid: qid,
                ans: optn
            },
            success: function (data) {
                if (data == 'C') {
                    $(".resultN").hide();
                    $(".resultY").show();
                    setInterval(function () { $(".resultY").hide(); }, 3000);
                } else {
                    $(".resultY").hide();
                    $(".resultN").show();
                    setInterval(function () { $(".resultN").hide(); }, 3000);
                }
            }
        });
    }

JavaScript

2 个答案: