如何防止在 jQuery 搜索框中快速输入重复值

Question

我制作了一个搜索框和一个列表，供用户在此列表中搜索他们的城市。 我使用 keyup 事件来重新加载城市和省份列表，正如您在我的代码中看到的：

// جست و جوی شهر ها
        $(document).on('keyup',"#provinceSearch", function(e){
            e.preventDefault();
            var provinceSearch = $("#provinceSearch").val();

            // بعد سرچ گزینه بعدی هاید شود
            $(".submit").hide();

            // بعد سرچ لیست قبلی لود شده پاک شود
            $("#xcity").empty();

            console.log("EV: 002");

            // ارسال درخواست
            $.ajax({
                url: '/api/allcities',
                method: 'POST',
                dataType: 'json',
                data: {
                    'provinceSearch': provinceSearch,
                },
                // در صورت موفقیت
                success: function(data) {
                    //  ذخیره آبجکت داده ها
                    var provinceobj = JSON.parse(data.provinces);
                    // لوپ شهرها
                    jQuery.each(provinceobj, function(provincei,provincev){
                        console.log('SUC:002 ');

                        var provinceItem = '<div id="provinceItem" data-provinceId="'+provincev.provinceGroupId+'" class="maindiv col-span-1 text-lg p-2 m-2 rounded-lg text-center bg-slate-100 hover:bg-slate-400 hover:text-white">'+provincev.provinceName+'</div>';
                        $("#xcity").append(provinceItem);
                    });
                    // پایان لوپ شهرها
                },
                // پایان موفقیت

                // آغاز شکست
                error: function(data) {
                    console.log('ERR:002');
                }
                // پایان شکست
            });
            // پایان ارسال درخواست
        });
        // پایان جست و جوی شهرها

当我在搜索框中缓慢输入时，没有问题，但是当我在搜索框中快速输入时，我看到每个按键都会重复一个列表项。 如下图所示：

我曾尝试使用 preventDefault 正如我在论坛中看到的那样，但它没有解决问题我还使用 empty() 函数来清空每个 keyup 的列表，但当我快速键入时它不起作用.

Answer 1

我已将空函数移至 ajax 的成功中并解决了问题。 这是我的新代码的成功部分：

success: function(data) {
                //  ذخیره آبجکت داده ها
                var provinceobj = JSON.parse(data.provinces);
                // بعد سرچ لیست قبلی لود شده پاک شود
                $("#xcity").empty();
                // لوپ شهرها
                jQuery.each(provinceobj, function(provincei,provincev){
                    console.log('SUC:002 ');

                    var provinceItem = '<div id="provinceItem" data-provinceId="'+provincev.provinceGroupId+'" class="maindiv col-span-1 text-lg p-2 m-2 rounded-lg text-center bg-slate-100 hover:bg-slate-400 hover:text-white">'+provincev.provinceName+'</div>';
                    $("#xcity").append(provinceItem);
                });
                // پایان لوپ شهرها
            },
            // پایان موفقیت