为什么我的搜索表单不是第一次进行搜索？

Question

我的搜索表单第一次不起作用，您需要再次搜索才能进行真正的搜索，这是我的代码有问题吗？

Fiddle

HTML

<form id='sform' action="/admin/search.php" method="get">
    <input id="search" placeholder="Enter your group name..." type="search" name="s" value="" />
    <p></p>
    <input type="submit" style="display:none;" />
</form>

CSS

/*search bar*/
 #sform {
    display:inline-block;
    position: relative;
}
#search {
    border: 4px solid #999;
    cursor: pointer;
    height: 10px;
    padding: 8px;
    position: relative;
    width: 10px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -moz-appearance: none;
    -webkit-appearance: none;
}
#search:hover {
    border-color: #199ed9;
}
#search:focus {
    border-color: #199ed9;
    outline: none;
    width: 180px;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#search.searching {
    margin-left: 80px;
    width: 10px;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
}
#search + p {
    background: #999;
    content:'';
    cursor: pointer;
    display: block;
    height: 10px;
    position: absolute;
    right: 10px;
    top: -22px;
    width: 4px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform-origin: center 20px;
    -webkit-transform-origin: center 20px;
}
#search + p:hover, #search:hover + p, #search:focus + p {
    background: #199ed9;
}
#search.searching + p {
    -moz-animation: rotateHandle .6s linear 6;
    -webkit-animation: rotateHandle .6s linear 6;
}
@-webkit-keyframes rotateHandle {
    from {
        -webkit-transform: rotate(135deg);
    }
    to {
        -webkit-transform: rotate(-225deg);
    }
}
@-moz-keyframes rotateHandle {
    from {
        -moz-transform: rotate(135deg);
    }
    to {
        -moz-transform: rotate(-225deg);
    }
}
/*end of search bar*/

JS

$(function (){
//expand search bar
var okToSubmit = false;
$("#sform").submit(function (e) {
    if (!okToSubmit) {
        e.preventDefault();
        $("#search").addClass('searching').val('');
        var url = $(this).attr('action');

        setTimeout(function () {
            $.ajax({
                type: 'POST',
                url: url,
                data: $(this).serialize(),
                timeout: 8000,
                success: function (r) {
                    $("#search").removeClass('searching');
                }
            });
            okToSubmit = true;
        }, 8000);
    }
});
});

Answer 1

问题在于ajax。 Ajax 中的 A 表示 异步。不能保证执行顺序或者不能保证ajax请求会在8秒内完成。

另外，okToSubmit 应该在成功处理程序中并执行此操作而不是您正在执行的操作：

function doAjax() {
    $.ajax({
        type: 'POST',
        url: url,
        data: $('#sform').serialize(),
        timeout: 8000,
        success: function (r) {
            $("#search").removeClass('searching');
            okToSubmit = true;
        }
    });
    setInterval(doAjax, 8000);
}

然后像这样调用函数：

$(function () {
    //expand search bar
    var okToSubmit = false;
    $("#sform").submit(function (e) {
        if (!okToSubmit) {
            e.preventDefault();
            $("#search").addClass('searching').val('');
            var url = $(this).attr('action');
            doAjax();
        }
    });
});

这将保证一个请求将在执行第二个请求之前完成。

如果您使用的 jquery 版本低于 1.8，您可以将async:false 属性添加到您的$.ajax({});

Answer 2

现在似乎以下工作：

    $("#sform").submit(function (e) {
                    $("#search").addClass('searching');
                    var url = $(this).attr('action');
                    $.ajax({
                            type: 'POST',
                            url: url,
                            data: $(this).serialize(),
                            timeout: 8000,
                            success: function (r) {
                                    $("#search").removeClass('searching');
                            }   
                    }); 

    }); 

Answer 3

它在您提供的小提琴中工作。但是，您需要删除 .val('') 在提交之前清空值的调用。

    var okToSubmit = false;
    $("#sform").submit(function (e) {
        e.preventDefault();
        if (!okToSubmit) {
            $("#search").addClass('searching');
            var url = $(this).attr('action');
            setTimeout(function () {
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: $(this).serialize(),
                    timeout: 8000,
                    success: function (r) {
                        alert('search result:'+ r);
                        $("#search").removeClass('searching');
                        okToSubmit = true;
                    }
                });
            }, 8000);
        }
    });