Question

我的javascript函数 setTimeout（）和 setInterval（）函数存在问题。

基本上我的函数处理表单提交操作。单击“提交”按钮后，所有来自指向表单的数据将被序列化并通过激发“ functionName ”的ajax发送。 functionName 如果一切正常则返回 1 ，否则返回错误代码。之后，使用成功消息或错误代码创建弹出窗口div。弹出div应该可见6秒。用户应该看到从 6 到 0 的倒计时。当达到零时，如果给出重定向参数，则重定向页面。如果没有给出重定向参数，则删除popup div。我正在使用 setTimeout（） 功能来解决一些麻烦。在此之前我使用 setinterval 功能，问题看起来几乎一样。

第一次触发funcion handleSubmit 时（点击提交buttin）倒计时功能效果很好，但是当我再次触发此功能时，会发生故障。我使用 onclick 来运行我的功能。

<input type="submit" name="submit" onclick="handleSubmit('formName', 'functionName', 'redirectURL')" value="send" />

以下是我的功能定义：

function handleSubmit(formName, functionName, redirectLocation){
    $('form#' + formName).submit(function(event){
        event.preventDefault();

        $.ajax({
            type: "POST",
            url: '/ajax/functions/module=none,method=' + functionName,
            data: $('form#' + formName).serialize(),
            success: function(data){

                var div = $('<div></div>').addClass('messages');
                div.appendTo('.content_block');

                var exitButton = $('<p class="title" style="overflow: hidden; margin-top:10px;"></p>');

                /**
                  * If the redirectLocation argument is empty we create HTML button with
                  * removeElement function which removes HTML popup DIV with class "messages"
                  * but if redirectLocation argument is provided we create HTML button with
                  * redirect function so after clicking we will be redirected.
                  * This buttons are created if we dont want to wait 6 seconds
                  */ 

                if(redirectLocation=='')
                    var button = $('<img title="Close this message" onclick="removeElement(\'.messages\')" src="/public/images/close.png" alt="Close message" style="cursor: pointer; float: right; padding-right: 10px;" width="16" height="16"  />');
                else
                    var button = $('<img title="Close this message" onclick="redirect(\''+ redirectLocation + '\')" src="/public/images/close.png" alt="Wyłącz komunikat" style="cursor: pointer; float: right; padding-right: 10px;" width="16" height="16"  />');


                exitButton.html(button);
                div.html(exitButton);
                var message = $('<p></p>');

              /**
                * Data recieved from AJAX 
                */

                if(data==1){

                    message.html("Data was successful uploaded");
                    message.appendTo(div);

                    var timer = $('<span id="timer"></span>');
                    timer.html('Message will be closed after: <b id="show-time">6</b> sec.');
                    timer.appendTo(div);

                    setTimeout("timedCount(" + redirectLocation + ")", 1000);                //this is countdown function

                }else{
                    message.html("Error: " + functionName + ".");
                    var error = $('<p>Error content: ' + data + '</p>');
                    error.appendTo(message);
                    message.appendTo(div);

                    var timer = $('<span id="timer"></span>');
                    timer.html('Message will be closed after: <b id="show-time">6</b> sek.');
                    timer.appendTo(div);
                    setTimeout("timedCount(" + redirectLocation + ")", 1000);                //this is countdown function
                }

                return true;
            }});
    });

}

我的timedCount函数应该从6倒数到0，看起来像这样。

  function timedCount(redirectLocation){
    timeCounter = $('#show-time').html();
    updateTime = parseInt(timeCounter)- 1;
    $("#show-time").html(updateTime);
    t = setTimeout("timedCount()", 1000);
    if(updateTime == 0){
        if(redirectLocation){
            $('#timer').html('Redirecting...');
            window.location = (redirectLocation);
        }else{
            $('.messages').remove();
            clearTimeout(t);  
        }

    }
}

内容。第一次（当不使用 redirectLocation ）函数 hendleSubmit 工作正常。但是当第二次点击提交按钮时，我的 timedCount 功能不会从6倒数到0，而 setTimeout 在后台运行永恒。我不知道是什么导致了这种行为。

Answer 1

您正在为提交按钮的submit事件处理程序内部的表单绑定click事件处理程序。这意味着在每次后续点击提交按钮时，会为表单的submit事件添加另一个事件处理程序。

如何在更全球化的空间中为所有表单声明submit事件处理程序？只需将$('form#' + formName).submit(function(event){...})移到handleSubmit函数之外：$('form').submit(function(event){...})。

此外，您应该在setTimeout声明中使用匿名函数（这样可以避免在没有必要时使用eval()）：

setTimeout(function () {
    timedCount(redirectLocation)
}, 1000);

无法运行包含setTimeout（）两次的函数。奇怪的行为

1 个答案: