Каждый клик вызывает разные вызовы API - PullRequest
Новая
       6

Каждый клик вызывает разные вызовы API

0 голосов
/ 30 ноября 2018

У меня есть список, и каждый нажатый элемент вызывает разные запросы API.Каждый запрос имеет разную продолжительность.В случае успеха я отображаю некоторые данные.

Проблема в том, что когда я нажимаю на элемент № 1, для загрузки которого требуется около 6000, и сразу после пункта № 2, который загружается на 2000, у меня будет последнийщелкнул отображаемый элемент - это элемент №2, потому что он уже загружен, и как только элемент №1 получит данные, мои данные изменятся на эти.Это неправильно, поскольку я хочу отображать данные последнего клика.

Вот как я обрабатываю событие: 

 newList.on('click', 'li', (e) => {
                let id = $(e.currentTarget).data("id");
                store.getCharacterDetails(id).then(docs => {
                    this.clearDetails();
                    this.charDetails = docs;
                    this.displayDetails(this.charDetails);
                })

Мой API - это симуляция из объекта хранилища.

Я полагаю, что это работает, как и ожидалось, но я хочу, чтобы последний запущенный запрос был действительным.

Ответы [ 2 ]

0 голосов
/ 30 ноября 2018

Сделать charDetails объектом, который хранит все результаты, идентифицированные идентификаторами.Следите за последним идентифицированным идентификатором. 

// in constructor
this.charDetails = {};
this.lastId = null;

newList.on('click', 'li', (e) => {
    let id = $(e.currentTarget).data("id");
    this.lastId = id;
    if (this.charDetails[id] === id) {  // don't cancel requests, cache them!
        this.displayDetails(this.charDetails[id])
    } else {
        store.getCharacterDetails(id).then(docs => {
            // this runs later, cache the result
            this.charDetails[id] = docs;
            if (id === lastId) {  // only update UI if the id was last clicked
                this.displayDetails(docs)
            }
        });
    }
});
0 голосов
/ 30 ноября 2018

Грубый и простой метод может состоять в создании массива и отправке идентификаторов, и после асинхронных операций вы можете просто проверить, является ли это последним щелчком или нет.Но ловушка заключается в том, что если clear и displayDetails отнимает много времени, и если кто-то щелкает, пока он очищается и отображается, он не зарегистрирует последний щелчок.

В любом случае, вот код, может быть, вы сможете сделать из него что-то лучше. 

var latestClick = [];
newList.on('click', 'li', (e) => {
    let id = $(e.currentTarget).data("id");
    latestClick.push(id);
    store.getCharacterDetails(id).then(docs => {
        if(id === latestClick[latestClick.length - 1]){
            this.clearDetails();
            this.charDetails = docs;
            this.displayDetails(this.charDetails);
            latestClick = [];
        }
    })
})
...