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

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上。 A 在 Ajax 中表示异步。您无法保证执行顺序或您无法保证 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({});