时间戳

首页 > 解决方案 > 等待返回 addeventlistener 不能为空

javascript - 等待返回 addeventlistener 不能为空

问题描述

商业商店，我动态渲染了一个带有详细信息的网站，我想制作 corosuel，但是当我尝试在返回后添加第二个等待是不可能的时，我尝试了他们的方法，但我在控制台中收到此错误“addEvent Listener cant be null”

const ProductScreen = {
  render: async () => {
    
    const request = await parseRequestUrl();
    
    const product = await getProduct(request.id);
    if (product.error) {
      return `<div>${product.error}</div>`;
    }
    return `
    <div class="carousel">
    <div class="carousel__item carousel__item--visible">
      <img src="${product.image}" />
    </div>
    <div class="carousel__item">
      <img src="${product.image2}" />
    </div>
    <div class="carousel__item">
      <img src="${product.image3}" />
    </div>

    <div class="carousel__actions">
      <button id="carousel__button--prev" aria-label="Previous slide"><</button>
      <button id="carousel__button--next" aria-label="Next slide">></button>
    </div>
  </div>


  
    `;
   
  },

} 



export default ProductScreen;

他们是滑块

 let slidePosition = 0;
  const slides = document.getElementsByClassName('carousel__item');
  const totalSlides = slides.length;
  
  document.
    getElementById('carousel__button--next')
    .addEventListener("click", function() {
      moveToNextSlide();
    });
  document.
    getElementById('carousel__button--prev')
    .addEventListener("click", function() {
      moveToPrevSlide();
    });
  
  function updateSlidePosition() {
    for (let slide of slides) {
      slide.classList.remove('carousel__item--visible');
      slide.classList.add('carousel__item--hidden');
    }
  
    slides[slidePosition].classList.add('carousel__item--visible');
  }
  
  function moveToNextSlide() {
    if (slidePosition === totalSlides - 1) {
      slidePosition = 0;
    } else {
      slidePosition++;
    }
  
    updateSlidePosition();
  }
  
  function moveToPrevSlide() {
    if (slidePosition === 0) {
      slidePosition = totalSlides - 1;
    } else {
      slidePosition--;
    }
  
    updateSlidePosition();
  };

你能给我任何建议我该怎么做吗？

标签： javascriptasync-awaitreturn

解决方案

在应用第二个 await 之前，您需要等到第一个 await 给出响应。

推荐阅读