How to prevent $.POST if content hasn't changed?

Question

I make a $.post call by sending array of objects (selected values from a checkbox tree) to my API every time the mouse leave the div where checkbox tree is located. The issue is that the user by moving randomly the mouse could leave and enter the div houndreds of times so that will cause useless $.post submission without getting new data as the sent content hasn't changed.

Actually here is how the code looks like right now:

$("div.sidebar-wrapper")
    .mouseleave(function () {
        postPareto();
    });

function postPareto() {
    $.ajax({
        type: "POST",
        data: JSON.stringify(config_Array()),
        url: "api/prodotti/pareto/",
        contentType: "application/json",
        success: function (dati) {
            tablePareto(dati);
        }
    });
}

So my question is, is there a way to prevent the $.post to being submissed if the content hasn't changed or should i just find another approach to submiss the checkbox selection (as it's a checkbox tree i chose to submit data on mouseleave so the user will have some time to decide what to check)?

There is no native way to achieve this. You could, however, simply check before your `$.post`, if the data has changed by comparing the serialized data. — Nicolas, Dec 19 '19 at 15:33
Take a look at: https://stackoverflow.com/questions/28948383/how-to-implement-debounce-fn-into-jquery-keyup-event you could use a debounced function. — Keff, Dec 19 '19 at 15:34
Does this answer your question? [Jquery ajax search debounce](https://stackoverflow.com/questions/18986895/jquery-ajax-search-debounce) — Keff, Dec 19 '19 at 15:35
And maybe this other answer: https://stackoverflow.com/a/18987233/5900163 — Keff, Dec 19 '19 at 15:35
@Keff so i should use debounced on change of chebox instead of calling the ajax on mouse leave? — NiceToMytyuk, Dec 19 '19 at 15:42
It depends, is the checkbox the only data that changes? or do you have more fields? Could you post your html as well? it might help me better understand the issue. — Keff, Dec 19 '19 at 15:47
@Keff actually it's a checkbox tree generated dynamically from json that look's like this https://imgur.com/2Nchn1I so se user can choose of which 'store' see the data but obviously it's a bad practise to show new data after each checkbox has been checked as he would check more than one 'store' of which see the data — NiceToMytyuk, Dec 19 '19 at 15:51
Okey, I understand, I'm going to post a solution, maybe it will be enough for your needs. — Keff, Dec 19 '19 at 15:55

score 2 · Accepted Answer · answered Dec 19 '19 at 16:04

In this case I would do the following (simple solution):

$("div.sidebar-wrapper")
    .mouseleave(function () {
        postPareto();
    });

// Save reference to previous value
let prevValue = null;
function postPareto() {
    let data = JSON.stringify(config_Array());

    // If it is the same value we can return and not perform POST 
    if (data === prevValue){
        return;
    } else {
        // Assign new value to prevValue
        prevValue = data;
    }

    $.ajax({
        type: "POST",
        data: JSON.stringify(config_Array()),
        url: "api/prodotti/pareto/",
        contentType: "application/json",
        success: function (dati) {
            tablePareto(dati);
        }
    });
}

It might be a good idea to look into rxjs, it's quite cool and powerful for reactive sites. For example in rxjs you could do:

const input = document.querySelector('div.sidebar-wrapper');
const observable = fromEvent(input, 'mouseleave');

observable
  .map((event: any) => config_Array()),
  .distinctUntilChanged() // Returns an Observable that emits all items emitted by the source Observable that are distinct by comparison from the previous item.
  .subscribe((resp) => {
    // This will only be called if value changes
    console.log(resp); // resp will be the result from `config_Array()`
  });

You can check this article, which explains this a bit more in depth

awesome i tought by saving the previous data and by comparing it was going to decrease the performance of the website but i was wrong. thank you.. — NiceToMytyuk, Dec 19 '19 at 16:14
A pleasure, It might decrease a little bit, but I doubt it decreases it so much to need to worry about it... — Keff, Dec 19 '19 at 16:16

How to prevent $.POST if content hasn't changed?

1 Answers1