Method runs multiple times

Asked Oct 01 '18 at 19:08

Active Oct 01 '18 at 19:20

Viewed 48 times

I'm trying to get products when user done with typing. But when user done typing, method runs multiple times not once.

If user type "apple" fetchProducts method run five times and send 5 ajax request. How can I reduce at once (unless you user start to search different product)

$(document).on("keyup keydown", 'input.select2-search__field', function (e) {

    let timer,
        interval = 2000,
        searchText = this.value;

    if (e.type == "keyup") {
        clearTimeout(timer);
        timer = setTimeout(fetchProducts, interval);
    }
    if (e.type == "keydown") {
        clearTimeout(timer);
    }

    function fetchProducts() {
        $.ajax({
            url: "../../../products/get-by-select-search",
            type: "post",
            dataType: "json",
            headers: {
                "X-CSRF-TOKEN": $("meta[name=csrf-token]").attr("content")
            },
            data: {search: searchText},
            success: function (response) {
                product.find('option').remove();
                product.select2({
                    theme: "classic",
                    data: response
                })
                    .val(null)
                    .trigger("change");
            }
        });
    }
});

edited Oct 01 '18 at 19:12

asked Oct 01 '18 at 19:08

Teoman Tıngır

2,766
2
21
41

Use debounce function from lodash. – sridhar.. Oct 01 '18 at 19:10
Move the `timer` variable outside the function – soktinpk Oct 01 '18 at 19:11
If you type `apple`, then you run `fetchProducts` 5 times (there are 5 `keyup` events). How would you know when someone is done typing in a product? – Sam Creamer Oct 01 '18 at 19:12
@tymeJV Ops sorry, I fixed the question – Teoman Tıngır Oct 01 '18 at 19:12
@Ivar yes I'm trying to use that answer but doesn't work for me – Teoman Tıngır Oct 01 '18 at 19:14
@HasanTıngır Did you read the second answer as well? – Ivar Oct 01 '18 at 19:14
You need to have the `timer` variable outside the handler, or else it gets reset on every key event. The dupe link has, hence it works. – Asons Oct 01 '18 at 19:21
@LGSon ohh you're right! I was thinking way why soktinpk said that... – Teoman Tıngır Oct 01 '18 at 19:25
2

@Chris So then why we need the built-in _"Close as duplicate"_? ... and I did more than just closed it, I added a comment telling what was wrong and how to fix it. – Asons Oct 01 '18 at 19:28

Method runs multiple times

0 Answers0