一旦看起来用户已完成输入,就调整keyup事件以调用API

我有一个带有jQuery onKeyup事件的邮政编码字段 - 这个想法是,一旦他们完全输入他们的邮政编码,就可以调用Google Maps Geocoding API来立即根据此邮政编码获取该位置.

这段代码可以工作,但是我想找到一个理想情况下不会多次调用API的解决方案,但是等待并查看用户是否已经使用某种等待x时间的方法完成输入,然后调用API.

谁能建议最好的方法呢？

$("#txtPostcode").keyup(function() {
    var postcode = $('#txtPostcode').val().length
    if (postcode.length >= 5 && postcode.length <= 8) {
        console.log('length is a valid UK length for a postcode');
        // some logic here to run with some way to work out if user has 'finished' typing
        callGoogleGeocodingAPI(postcode);
    }
});

Rory McCross.. 8

您可以使用setTimeout仅在键入已停止250ms后进行调用 - 这通常是在击键之间足以允许完整输入的时间.试试这个:

var timer;
$("#txtPostcode").keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        var postcode = $('#txtPostcode').val().length
        if (postcode.length >= 5 && postcode.length <= 8) {
            console.log('length is a valid UK length for a postcode');
            // some logic here to run with some way to work out if user has 'finished' typing
            callGoogleGeocodingAPI(postcode);
        }
    }, 250);
});

如果您觉得有太多的延迟,您可以调整确切的超时以更好地满足您的需求.

您可以使用setTimeout仅在键入已停止250ms后进行调用 - 这通常是在击键之间足以允许完整输入的时间.试试这个:

var timer;
$("#txtPostcode").keyup(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        var postcode = $('#txtPostcode').val().length
        if (postcode.length >= 5 && postcode.length <= 8) {
            console.log('length is a valid UK length for a postcode');
            // some logic here to run with some way to work out if user has 'finished' typing
            callGoogleGeocodingAPI(postcode);
        }
    }, 250);
});

如果您觉得有太多的延迟,您可以调整确切的超时以更好地满足您的需求.