Javascript 回调调用了两次

Question

我对编码很陌生，这真难倒我...

这是我的 index.html 文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
  <link rel="stylesheet" href="owlcarousel/owl.carousel.css">
  <link rel="stylesheet" href="owlcarousel/owl.theme.default.css">
</head>

<body>
  <div class="owl-carousel owl-theme">
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" type="text/javascript" language="JavaScript"></script>
  <script src="jquery.min.js"></script>
  <script src="owlcarousel/owl.carousel.js"></script>
  <script src="app.js"></script>
  <script>
    fetch('https://www.paulschlatter.com/slideshow/slideshows.txt')
      .then((response) => response.text().then(yourCallback));

    let cache = {}

    function yourCallback(retrievedText, callback) {
      if (cache[retrievedText]) {
        console.log('oops')
      } else {
        let array = []

        console.log(callback)

        array = retrievedText.split(/\n|\r/g)

        let httpsArray = []

        let keysArray = []

        let mappedArray = array.map(item => {
          if (item.substring(0, 5) === 'https') {
            httpsArray.push(item)
          } else if (item.substring(0, 3) === '202') {
            keysArray.push(item)
          }
        })

        const object = { ...keysArray
        }

        for (const prop in object) {
          window['value' + prop] = []
          httpsArray.filter(item => item.includes(object[prop])).map(item => {
            window['value' + prop].push(item)
          })
        }

        const owlImages = document.querySelector('.owl-carousel'),
          owlDiv = document.createElement('img');

        owlDiv.setAttribute('src', window.value0.pop())
        owlDiv.setAttribute('alt', '')

        owlImages.appendChild(owlDiv)
      }
    }
  </script>
</body>

</html>

我没有使用 npm 或其他任何东西，直接 JavaScript 和 HTML。

函数 yourCallback 触发了两次，所以即使我只 console.log 你好世界它 returns 两次向我的浏览器问好世界。

显然这并不理想，我认为问题出在

fetch('https://www.paulschlatter.com/slideshow/slideshows.txt')
.then((response) => response.text().ten(yourCallback));

Answer 1

这是一个愚蠢的错误，在我的 app.js 文件中我有相同的 fetch 和 yourCallback 函数，所以它触发了两次因为我调用了它两次:)

Javascript 回调调用了两次

Javascript callback called twice

html

javascript

css

jquery

callback