Блог

Главная - Вопросы по программированию - Дважды вызванный обратный вызов Javascript

Дважды вызванный обратный вызов Javascript

#javascript #html #jquery #css #callback

#javascript #HTML #jquery #css #обратный вызов

Вопрос:

Я довольно новичок в кодировании, и это действительно ставит меня в тупик…

Вот мой 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 приветствую мир, она дважды возвращает hello world в мой браузер.

Очевидно, что это не идеально, и я считаю, что проблема заключается в

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

Комментарии:

1. не то чтобы это что-то изменило, но вы должны связать обещания, .then((response) => response.text()).then(yourCallback); — не положение ) — но это не поможет — в качестве точки интереса, если вы console.log('hello world') перед fetch регистрируете это дважды?

2. также … . тогда обратные вызовы получают ровно ОДИН аргумент, поэтому callback in function yourCallback(retrievedText, callback) всегда будет неопределенным — опять же, это не ваша проблема, просто сообщаю вам

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

4. @charlietfl — если вы посмотрите на код, выборка выполняется встроенно :p

5. @JaromandaX Я понимаю, вот почему не имеет смысла, что он сработает дважды

Ответ №1:

Это была глупая ошибка, на мой app.js файл У меня была одна и та же функция fetch и yourCallback, поэтому она запускалась дважды, потому что я вызывал ее дважды 🙂