Событие прокрутки не работает: синхронный XMLHttpRequest в основном потоке устарел - PullRequest
Новая
       9

Событие прокрутки не работает: синхронный XMLHttpRequest в основном потоке устарел

0 голосов
/ 10 января 2020

JS Fiddle here

Итак, я извлекаю виджеты из API и пытаюсь отображать их динамически. В файле JS у меня есть событие прокрутки на line 104, которое определяет, когда пользователь прокрутил до нижней части окна. Когда это произойдет, я хочу, чтобы он отображал следующие 3 виджета, которые я сохранил в массиве allWidgets.

Перед прокруткой пользователя я копирую первые три виджета из массива allWidgets, сохраняю их в отдельных переменных и добавляю на страницу. Это на line 94.

При первой прокрутке вниз страницы, она загрузится в следующие три виджета. Но в следующий раз, когда я прокручиваю до конца, я получаю сообщение об ошибке:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check <URL>.

Кто-нибудь знает, как я могу это исправить? Действительно расстроенный, пытался выяснить это в течение многих дней!

Редактировать: JS Скрипка по какой-то причине не сохранит мой s css. Если вы хотите, вот я go: 

@import url('https://fonts.googleapis.com/css?family=Lato:100&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kulim+Park&display=swap');


$dark: #211b13;
$darker: darken($dark, 30%);
$light: lighten($dark, 10%);
$lighter: lighten($dark, 50%);
$accent: #d17c2c;
$light-accent: lighten($accent, 8%);

body {
  font-family: 'Lato', sans-serif;
  font-weight: 200;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
}

h2 {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
}

p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a {
  text-decoration: none;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

li {
  list-style: none;
}

#content {
  background-image: url(../../Images/background-texture-3.png);
}

header {
  display: flex;
  justify-content: flex-start;
  background-image: url(../../Images/Demographic_Image.png);
}

header h1 {
  color: rgb(193, 193, 193);
  font-family: 'Lato', sans-serif;
  font-size: 1.5rem;
  margin: 2em 0 0 .2em;
  padding-bottom: .3em;
  @media (min-width: 768px) {
    font-size: 2.5rem;
    margin: 1.5em 0 0 .2em;
  }
}

// Quick Facts
.quick-background {
  background: linear-gradient(.25turn, #99f0c0, transparent);
}

.quick-facts {
  font-family: 'Kulim Park', sans-serif;
  background: url('../../Images/quick-facts-icn.png');
  background-size: cover;
  max-width: 40%;
  padding: .3em 0;
  animation: 1s ease-in-out 0s 1 quickFactSlide;
}

@keyframes quickFactSlide {
  0% {
    max-width: 40%;
    // border-radius: 0 100% 0 0;
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(50%);
  }
  60% {
    transform: translateX(-10%);
  }
  100% {
    max-width: 40%;
    // border-radius: 0 100% 0 0;
  }
}


.quick-facts h4 {
  margin-bottom: 0;
  margin-left: .5em;
  font-style: italic;
}

.total-num {
  animation: 4s ease-in-out infinite totalNumColor;
}

@keyframes totalNumColor {
  0% {
    color: black;
  }
  50% {
    color: white;
  }
  100% {
    color: black;
  }
}

.total,
.num {
  margin-left: 1em;
}

.total p,
.num p {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  color: black;
  font-weight: 300;
  font-size: 1rem;
}

.num {
  font-weight: 900 !important;
}

.widget-total-p {
  text-decoration: underline;
}


/*
    DEMO STYLE
*/


.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    // margin-bottom: 10px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

#navbarSupportedContent {
  display: flex;
  justify-content: center;
}

.btn-info {
  background-color: $dark;
  border: 3px solid $darker;
}

.btn-info:hover {
  background-color: $light;
  border: 3px solid $dark;
}
//
// .btn-info:focus {
//   background-color: $lighter;
//   border: none;
//   outline: none !important;
//   box-shadow: none;
// }

.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active,
.show>.btn-info.dropdown-toggle {
  background-color: $lighter;
  border: $light;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
    display: flex;
    flex-grow: 1;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: $dark;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: $dark;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid $light;
}

.home-li {
  position: none;
  font-size: 1.2rem;
  padding: .3em .5em;
  margin-bottom: 0;
  background-color: $light;
  transition: all .7s ease-in-out;
}

.home-li:hover {
  background-color: $accent;
}

// .home-li:focus {
//   outline: none !important;
//   box-shadow: none !important;
//   background-color: $lighter;
// }

.product-title {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  margin: .5em 3.5em .5em .5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid $light;
}

#sidebar ul p {
    color: #fff;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    background: $light;
}

// #sidebar ul li a:focus {
//     background: $light;
//     outline: none;
//     box-shadow: none;
// }

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
}

a[data-toggle="collapse"] {
    position: relative;
}

#sidebar .widget-link {
  font-size: 1rem;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: $dark;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: $light !important;
    color: #fff !important;
}

#sidebar .CTAs {
  margin: 0 auto;
}

#sidebar .btn-li {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  font-family: 'Lato', sans-serif;
  font-size: 1.2rem;
  background-color: $accent;
  border: 2px solid $light-accent;
  border-radius: 3px;
  width: 90%;
  transition: background-color .75s ease-in-out;
}

#sidebar .btn-li:hover {
  background-color: $light-accent;
}

#sidebar .website-link {
  color: white;
  font-weight: 100;
  transition: background-color .75s ease-in-out;
}

#sidebar .website-link:hover {
  background-color: transparent;
}

#sidebar .website-btn {
  background-color: transparent;
  border: none;
}

#sidebar .logo-li {
  display: flex;
  justify-content: center;
}

#sidebar .logo-img {
  width: 50px;
  height: 50px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
  width: calc(90% - 250px);
  padding: 5px;
  min-height: 100vh;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
  @media (min-width: 768px) {
    width: calc(100% - 250px);
    padding: 15px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}
}

#content.active {
    width: 100%;
}

.city-state-btn,
.zipcode-btn,
.county-btn,
.time-zone-btn {
  padding-right: 1.5em;
}

.btn-group {
   margin-left: .5em;
}

.city-state-btn::after,
.zipcode-btn::after,
.county-btn::after,
.time-zone-btn::after {
  right: 10px;
}

.filter-list {
  display: flex;
  justify-content: center;
}

.filter-by {
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  margin-right: 1em;
}

input {
  margin: 0 .5em;
  padding-left: .5em;
  font-family: 'Lato', sans-serif;
  width: 245px;
}

.btn-control {
  font-family: 'Kulim Park', sans-serif;
  font-size: .9rem;
  background-color: #8ee6b5;
  border: 2px solid darken(#8ee6b5, 10%);
  border-radius: 2px;
  padding: .3em .5em;
}

.search-placeholder {
  margin: 0 auto;
}

.placeholder-img {
  display: flex;
  justify-content: center;
}

.placeholder-txt {
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #content.active {
        width: calc(100% - 250px);
    }
    #sidebarCollapse span {
        display: none;
    }
}

/* ---------------------------------------------------
    WIDGETS
----------------------------------------------------- */

.widgets {
  margin-top: 10px;
}

.trivia-widgets,
.in-the-works-widgets {
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "widget-1 widget-2"
      "widget-3 widget-4"
      "widget-5 widget-6";
  }
  @media (min-width: 1024px) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "widget-1 widget-2 widget-3"
      "widget-4 widget-5 widget-6"
  }
}

.widget {
  margin-bottom: 4em;
}

.widget-image {
  text-align: center;
}


iframe {
  border: none;
  display: block;
  margin: 0 auto;
  width: 300px;
  height: 350px;
}

body {
  background-color: transparent !important;
}

.weather-iframe,
.puzzle-iframe,
.in-the-works-iframe,
.games-iframe {
  margin-bottom: 1em;
}

.details {
  margin: 0 .5em;
  background-color: rgb(242, 240, 227);
  border-radius: 4px;
}

.details {
  padding: .5em 0 1em 0;
  margin-bottom: 4em;
}

.detail {
  padding: 0 1em;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  font-style: normal;
}

.span-detail {
  float: right;
  font-family: 'Lato', sans-serif;
  font-weight: 800;
  font-style: italic;
}

.footer-div {
  z-index: 2000;
}

footer {
  // margin: 0 auto;
  height: 20px;
  // max-width: 90%;
  background-color: $dark;
}

1 Ответ

0 голосов
/ 10 января 2020

Только если вы являетесь автором виджета, вы можете изменить что-либо.
Страница https://w1.predictinteractive.com/widgets/weather/index.html, с которой вы получаете свой виджет, содержит файл JS с именем weather.min.js. Этот файл, вероятно, содержит синхронный XMLHTTPRequest, который заблокирует ваш поток, как предполагает предупреждение.

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

TL; DR Нет способа исправить это, если вы не можете изменить JS из виджет.

...