首页 > 解决方案 > 如何防止网页无限加载相同的元素?

问题描述

我只想显示一次电影,但是在它们被安装后,onScroll 方法会重复,尽管有 removeEventListener。onScroll 方法为bottomOfWindow 设置布尔值。

 if (bottomOfWindow) {
          this.nextMovieIds.forEach((movieId) => {
            axios
              .get("http://www.omdbapi.com/?i=" + movieId + "&apikey=2cbab1d9&")
              .then((response) => {
                this.$store.dispatch("addMovie", { movie: response.data });
                
              })
              .catch((err) => {
                console.log(err);
              });
          });
        }

  mounted() {
    this.$nextTick(function () {

      window.addEventListener("scroll", this.onScroll);
      this.onScroll(); 
    });

    if (this.$store.state.movies.length < 7) {
      this.nextMovieIds = [
        "tt0317919",
        "tt0298203",
        "tt0410097",
        "tt1057500",
        "tt0120591",
        "tt1504320",
        
      ];
    } else {
      this.nextMovieIds = [];
    }
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.onScroll);
  }

标签: javascriptvue.jsscrollinfinite-scrollmount

解决方案


推荐阅读