在移动设备上第一次和第二次单击网页按钮时无法发送 GET 请求

如何解决在移动设备上第一次和第二次单击网页按钮时无法发送 GET 请求

我在 esp32 上托管了一个网络服务器，并让它在 GET 请求中显示一个网站。当我单击 pause_button 时，它会向服务器发送一个 GET 请求，其中包含请求标头中 esp32 的相应信息。当我尝试使用手机访问网页并尝试第一次和第二次按下 pause_button 时，button_clicked() 函数会触发，但在我的网络服务器上未检测到 GET 请求。在前两次单击后，按钮工作正常，我可以检测到移动请求。在桌面上，一切从一开始就正常。这是脚本标签包含请求的网页的 html 代码：



<html>
    <head>
        <title>Smart Vinyl</title>
        <link rel="shortcut icon" type="image/png" href="https://pngimg.com/uploads/vinyl/vinyl_PNG105.png"/>
    </head>
    <style>
        body {
            display: flex;
            text-align: center;
            color: white;
            font-family: "Trebuchet MS",Arial;
            margin-left:auto;
            margin: 0;
            margin-right:auto;
            background-image: url("https://i.ibb.co/KXh2MXS/iu.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .container{
            position: relative;
            height:100%;
            width:60%;
            margin:0%
        }
        
        input[type=range] {
            -webkit-appearance: none;
            transform:rotate(180deg);
        }
        #myRange::-webkit-slider-thumb{
            height: 100px;
            width: 60px;
            border-radius: 3px;
            background-color: transparent;
            background: url("https://i.ibb.co/DCvbp96/cartridge.png") center no-repeat;
            transform: rotate(-90deg);
            background-size:contain ;
            cursor: pointer;
            -webkit-appearance: none;
        }
        .slider{
            position: relative;
            width: 64.5%;
            height: 0.5%;
            top: 50%;
            right: 0%;
            left:12%;
            z-index: 3;
        }
        #vinyl{
            filter:drop-shadow(30px 10px 8px rgba(0,0.4));
            position: relative;
            left:0%;
            height:100%;
            width:100%
        }
        .right-container{
            width: 40%;
            margin:0px;
            padding-top: 20%;
        }
        .form{
            background: #3B484E;
            margin:10%;
            padding:20%;
            padding-top:10%;
            padding-bottom:40%;
            border-radius: 2%;
            Box-shadow: 10px 10px 5px black;
        }
        #pause_button{
            height: 8%;
            padding: 5%;
        }
    </style>
    <body>
        <div class="container">
            <input type="range" min="115" max="153" value="115" class="slider" id="myRange" onchange=getSliderValue(this.value)>
            <img src="https://i.ibb.co/J7SJ1jF/vinyl.png" id="vinyl">
        </div>
        <div class="right-container">
            <div class="form">          
                <h1>Value: <span id="servoPos">115</span></h1>
                <button type="button" id="needle_pos_button">Change Needle Pos</button>
                <h3>Current Arm-status</h3>
                <img src="https://i.ibb.co/Gd5KCBk/start.png" id="pause_button">
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            servo_pos = document.getElementById("servoPos");
            pos = "115";

            $('#pause_button').click(function(){
                if ($('#pause_button').attr('src') == 'https://i.ibb.co/Gd5KCBk/start.png'){
                    $('#pause_button').attr('src',"https://i.ibb.co/BzqqHZK/pause.png");

                    $.get("?armstatus=" + "ON" + "&",function(data,status){
                        alert("Data: " + "ON");
                    });
                } else {
                    $('#pause_button').attr('src',"https://i.ibb.co/Gd5KCBk/start.png");

                    $.get("?armstatus=" + "OFF" + "&",status){
                        alert("Data: " + "OFF");
                    });
                }
            })

            function getSliderValue(value){
                pos = value;
                servo_pos.innerHTML = value;
            }
            
            //needle-pos-request
            $(document).ready(function(){
              $("#needle_pos_button").click(function(){
                if ($('#pause_button').attr('src') == 'https://i.ibb.co/Gd5KCBk/start.png'){
                    $.get("?needlevalue=" + pos + "&",status){
                        alert("Data: " + pos);
                    });
                } else {
                    alert("Cant change Needle when Music is playing");
                }});
            });
        </script>
    </body>
</html>

我发现在移动设备上，浏览器一开始会发送更多请求，这可能是它一开始不起作用的原因，但我仍然不知道如何实际解决这个问题。