Дважды запустите вызов API tumblr с разными параметрами, чтобы получить разные данные - PullRequest
Новая
       38

Дважды запустите вызов API tumblr с разными параметрами, чтобы получить разные данные

0 голосов
/ 12 апреля 2020

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

Хотя я думаю, что правильные параметры передаются в нужное время, в какой-то момент мои переменные обновляются, и я не уверен, когда и почему.

Вот мой слегка упрощенный js: 

// randomFilter
const postContent = $('.posts');
const limit = 1;
let index = 0;
let tag;

const retrievePosts = () => {
    const protocol = document.location.protocol;
    const baseURL = 'api.tumblr.com/v2/blog/';
    const blog = 'studio-lukeharby.tumblr.com';
    if (index === 0) {
        tag = 'cubes';
    } else if (index === 1) {
        tag = 'objects';
    }
    console.log('index at start:', index);
    $.ajax({
        type: 'GET',
        url: `${protocol}//${baseURL}${blog}/posts`,
        dataType: 'jsonp',
        data: {
            api_key: sw._site.tumblrAPIKey,
            tag: tag
        },
        success: function(data){
            let randomNumber;
            randomNumber = Math.floor(Math.random() * data.response.total_posts);
            console.log(`1st api call tag: ${tag}`);
            $.ajax({
                type: 'GET',
                url: `${protocol}//${baseURL}${blog}/posts`,
                dataType: 'jsonp',
                data: {
                    api_key: sw._site.tumblrAPIKey,
                    offset: randomNumber,
                    tag: tag,
                    limit: limit
                },
                success: function(data) {
                    postContent.append(`<li><img src='${data.response.posts[0].photos[0].original_size.url}' alt='[${data.response.posts[0].tags}]' /></li>`);
                    setImgProps();
                    setWrapperProps();
                    console.log('randomNumber:', randomNumber, 'posts:', data.response.total_posts);
                    console.log(`2nd api call tag: ${tag}`);
                }
            });
        },
        error: function(error){
            pageWrapper.empty();
            pageWrapper.append('<p class="content errorInfo">Sorry there was an issue retrieving the data</p>');
            postContent.remove();
            elem.removeClass(loadingClass);
            console.log(error.statusText);
        },
        complete: function() {
        }
    });
}

const initCounter = () => {
    while (index < 2) {
        index++
        retrievePosts();
        console.log('index:', index, 'tag:', tag);
    }
};

postContent.empty();
initCounter();

У меня есть рабочий пример jsfiddle

Теоретически функция должна искать сообщения с тегом 'cubes' и проверьте общее количество сообщений с этим тегом, а затем верните 1 из них случайным образом. Затем он должен пройти через следующий тег, проверить общее количество сообщений и вернуть случайный с помощью параметра смещения. Таким образом, в теории сообщение всегда должно быть возвращено для каждого цикла.

HALP

Ответы [ 2 ]

1 голос
/ 15 апреля 2020

проблема в сфере. Тег

- это глобальная переменная в вашем коде. и когда вы вызываете функцию в l oop с помощью функции ajax, ajax, не ждите завершения ajax и возвращаются обратно.

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

, поэтому сначала вы получаете tag = 'cubes' и вскоре после изменения tag = 'objects'.

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

, и вы должны сделать ее динамической c, как если бы у вас было больше тегов, скажем, 100, то вы бы сделали это, если бы для каждого тега ... я не исправляю это, но вы должны . 

const initCounter = () => {
    while (index <= 1) {
        index++;
       if (index === 1) {
            retrievePosts('cubes');
        } else if (index === 2) {
           retrievePosts('objects');
        }

        console.log('index:', index, 'tag:', tag);
    }
};

и в функцию добавьте параметр 

const retrievePosts = (tags) => {
      // remove the if block for index check
      // and change "tag" to "tags" everywhere in this function.
}

вот результат после изменений: result after

и вот результат до before

1 голос
/ 15 апреля 2020

Проблема с кодом выше в том, что tag является глобальным по объему. Итак, вот что происходит:

  1. Вы меняете индекс и вызываете вашу retrievePost функцию
  2. tag, и ваш ajax вызов помещается в очередь для запуска позже
  3. Вы меняете индекс и вызываете вашу retrievePost функцию
  4. tag, и ваш ajax вызов помещается в очередь для запуска на более позднем этапе.
  5. Оба ваших ajax вызова удалены из очереди и выполняются с одинаковым значением tag

Поместить let tag; внутри функции retrievePost и tag должно быть правильным, хотя вы больше не сможете печатать его внутри функции initCounter. Вы также можете сделать: 

const postContent = $('.posts');
const limit = 1;
let index = 0;
let outerTag;

const retrievePosts = () => {
    const protocol = document.location.protocol;
    const baseURL = 'api.tumblr.com/v2/blog/';
    const blog = 'studio-lukeharby.tumblr.com';
    let tag;
    if (index === 0) {
        tag = 'cubes';
    } else if (index === 1) {
        tag = 'objects';
    }
    outerTag = tag;
    ...
}
const initCounter = () => {
    while (index < 2) {
        index++
        retrievePosts();
        console.log('index:', index, 'tag:', outerTag);
    }
};
...