Question

我为城市输入构建了一个自动提示，但问题是当我输入＆＃34;波士顿＆＃34;例如，它会加载＆＃34;波士顿＆＃34;的结果，但是然后将结果替换为＆＃34; Bost＆＃34;，然后＆＃34; B＆＃34;因为加载时间最长。我试图取消请求，但它不起作用。我试图设置超时，因此它只在用户完成输入时加载，但它不会阻止它加载早期的变体，例如＆＃34; B＆＃34;任

var timer;
    $('#city').keyup(function(event) {
        clearTimeout(timer); // not working
        var c = $('#country').val(),
            v = $('#city').val(),
            e = $('.city-suggest');
        if(v.length > 0) {
            var timer = setTimeout(function() {
                e.html('<i class="fa fa-circle-o-notch fa-spin"></i>').show();
                $.ajax({
                    url: '../-parse/check-city.php?c='+c+'&v='+v,
                    success: function(data) {
                        e.html(data);
                    }
                });
            }, 2500);
        } else {
            $('.city-suggest').hide();
        }
    });

Answer 1

您正在将新var timer设置到keyup函数的范围内，因此您不会使用全局范围中的var。为了使用clearTimeout（），在定义超时函数时删除var timer; $('#city').keyup(function(event) { clearTimeout(timer); // now working var c = $('#country').val(), v = $('#city').val(), e = $('.city-suggest'); if(v.length > 0) { timer = setTimeout(function() { e.html('<i class="fa fa-circle-o-notch fa-spin"></i>').show(); e.html('hello World'); }, 2500); } else { $('.city-suggest').hide(); } });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="country" type="text" value="Country"/>
<input id="city" type="text"/>
<span class="city-suggest"></span>

＆＃13;

{{1}}

＆＃13;

Answer 2

我发现setTimeout不能在多行上运行良好。

var timer;
$('#city').keyup(function(event) {
clearTimeout(timer); // not working
var c = $('#country').val(),
var v = $('#city').val(),
var e = $('.city-suggest');
if(v.length > 0) {
    var timer = setTimeout(function(){e.html('<i class="fa fa-circle-o-notch fa-spin"></i>').show();$.ajax({url: '../-parse/check-city.php?c='+c+'&v='+v,success: function(data) {e.html(data);}});}, 2500);
} else {
    $('.city-suggest').hide();
}
});

此外，如果您希望更容易阅读代码，这应该有效：

var c = '';
var v = '';
var e = '';
var timer;
$('#city').keyup(function(event) {
    clearTimeout(timer); // not working
        c = $('#country').val(),
        v = $('#city').val(),
        e = $('.city-suggest');
    if(v.length > 0) {
        var timer = setTimeout(function(){City()}, 2500);
    } else {
    $('.city-suggest').hide();
}
});
function City(){
    e.html('<i class="fa fa-circle-o-notch fa-spin"></i>').show();
    $.ajax({
        url: '../-parse/check-city.php?c='+c+'&v='+v,success: function(data){e.html(data);}
});
}

键入时按键上的clearTimeout

2 个答案: