表单提交到Servlet后如何调用JavaScript函数实现JSP页面倒计时功能

浏览器对HTML内容是从上到下逐行解析执行的，你在<c:if>代码块里调用countDown()函数时，写在</body>标签之后的函数定义还没有被加载到浏览器内存中，此时调用不存在的函数就会执行失败，和你把脚本放在JSTL的<c:if>标签内没有关系。

方案1：调整JS函数的定义位置 #

把countDown()的函数定义移到调用位置之前，比如放到<head>标签内，或者放到<c:if>块的上方，保证执行调用逻辑时函数已经被加载完成。

方案2：延迟函数调用时机 #

等整个页面所有内容加载完成后再执行调用逻辑，避免函数未定义的问题。

以下代码已经修复调用问题，同时补全了倒计时功能逻辑，Servlet代码无需修改：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Demo Page</title>
        <!-- 将JS函数定义移到head中，保证调用前已经加载 -->
        <script type="text/javascript">
            function countDown() {
                // 从隐藏域获取剩余时间并转为数字类型
                let remain = parseInt(document.getElementById("time-remain").value);
                const displayDom = document.getElementById("display-time");
                // 定义1秒执行一次的定时器
                const timer = setInterval(() => {
                    if (remain <= 0) {
                        clearInterval(timer);
                        displayDom.innerText = "倒计时结束";
                        return;
                    }
                    displayDom.innerText = remain + " 秒";
                    remain--;
                }, 1000)
            }
        </script>
    </head>
    <body>
        <form action="demo" method="POST">
            Time: <input type="text" id="input-time" name="inputTime" placeholder="请输入倒计时秒数">
            <input type="submit" value="Start">
        </form>

        <c:if test="${timeRemain!= null}">
                <input type="hidden" id="time-remain" value="${timeRemain}">
                <p>Time Remaining:  <span id="display-time"></span></p>
                <script  type="text/javascript">
                    // 此时函数已经定义完成，可正常调用
                    countDown();
                </script>
        </c:if>

    </body>
</html>

如果不想调整函数位置，也可以保留原来的函数位置，通过页面加载事件触发调用，修改如下：

<!-- 把<c:if>块内的调用代码删除，在原来的函数定义后添加以下逻辑 -->
<script type="text/javascript">
    async function countDown() {
        var timeRemain = document.getElementById("time-remain").value;
        alert(timeRemain);
    }
    // 页面加载完成后判断是否存在倒计时隐藏域，存在则自动调用函数
    document.addEventListener('DOMContentLoaded', function() {
        if (document.getElementById('time-remain')) {
            countDown();
        }
    })
</script>

内容的提问来源于stack exchange，提问作者LAM HOANG