javascript - Duplicate response from API

Question

Live preview from git pages

1. Goal: Generate a new quote each time a user clicks "new quote"
2. What is happening: A quote is being generated twice in a row intermittently

I attempted to assign each quote as 'oldQuote' and then write logic that if oldQuote was the same, fetch another quote. What am I doing wrong here?

const quoteContainer = document.getElementById('quote-container');
 const quoteText = document.getElementById('quote');
 const authorText = document.getElementById('author');
 const twitterBtn = document.getElementById('twitter');
 const newQuoteBtn = document.getElementById('new-quote');
 const loader = document.getElementById('loader');
 var oldQuote; 

function loading() {
    loader.hidden = false;
    quoteContainer.hidden = true;
}
 
function complete() {
    if (!loader.hidden) {
        quoteContainer.hidden = false;
        loader.hidden = true;
    }
}

 // Get Quote From API
   async function getQuote () {
       loading();
       const proxyUrl = 'https://arcane-mountain-19745.herokuapp.com/'
       const apiUrl = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json';
       try {
           const response = await fetch(proxyUrl + apiUrl);
           const data = await response.json();
        //    If Author is blank, add 'Unknown'
           if (data.quoteAuthor === '') {
               authorText.innerText = 'Unknown';
           } else {
           authorText.innerText = data.quoteAuthor;
           }
        //    Reduce font size for long quotes
        if (data.quoteText.length > 120) {
            quoteText.classList.add('long-quote');
        } else { 
            quoteText.classList.remove('long-quote');
        }       
        quoteText.innerText = data.quoteText;
        // Stop loader, Show Quote
        if (this.oldQuote === data.quoteText){
         getQuote();
        }
        this.oldQuote = data.quoteText
        complete();
       } catch (error) {  
        getQuote();
       }
   }
// Tweet Quote
function tweetQuote() {
    const quote = quoteText.innerText;
    const author = authorText.innerText;
    const twitterUrl = `https://twitter.com/intent/tweet?text=${quote} - ${author}`;
    window.open(twitterUrl, '_blank');
}
// Event Listeners
    newQuoteBtn.addEventListener('click', getQuote);
    twitterBtn.addEventListener('click', tweetQuote);

   // On Load
   getQuote();

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

html {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='1' viewBox='0 0 40 1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h20v1H0z' fill='%23000000' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: #000;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-container {
    width: auto;
    max-width: 900px;
    padding: 20px 30px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.575);
    box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
    
}

.quote-text {
    font-size: 2.75rem;

}

.long-quote {
    font-size: 2rem;
}

.fa-quote-left {
    font-size: 4rem;
}

.quote-author {
    margin-top: 15px;
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
}

.button-container {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
}

button {
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 10px;
    color: #ffffff;
    background: #333333;
    outline: none;
    padding: 0.5rem 1.8rem;
    box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
}

button:hover {
    filter: brightness(110%);
}

button:active {
    transform: translate(0, 0.3rem);
    box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
}

.twitter-button:hover {
    color: #38a1f3;
}

.fa-twitter {
    font-size: 1.5rem;
}
/* Loader */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #333; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/*media query: Tablet or smaller */
@media screen and (max-width: 1000px) {
    .quote-container {
        margin: auto 10px;
    }

    .quote-text {
        font-size: 2.5rem;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Generator</title>
    <link rel="icon" type="image/png" href="https://www.google.com/s2/u/0/favicons?domain=https://www.jqueryscript.net
    ">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quote-container" id="quote-container">
        <!-- Quote Element -->
        <div class="quote-text">
            <i class="fas fa-quote-left"></i>
            <span id="quote"></span>
        </div>
        <!-- Author -->
        <div class="quote-author">
            <span id="author"></span>
        </div>
       <!-- Buttons -->
        <div class="button-container">
            <button class="twitter-button" id="twitter" title="Tweet This!">
              <i class="fab fa-twitter"></i>
            </button>
        <button id="new-quote">New Quote</button>
        </div>
    </div>
    <!-- Loader -->
    <div class="loader" id="loader"></div>
    <!--Script  -->
    <script src="script.js"></script>
</body>
</html>

question from:https://stackoverflow.com/questions/65906652/duplicate-response-from-api

Answer 1

Waitting for answers