单击过滤器按钮时，为什么我的网页会冻结？

Question

负责使用来自JSON响应的数据创建类似网页的pinterest。每个JSON对象都有一个service_name键，可以是manual，twitter或instagram。我尝试创建三个过滤器按钮，以便网页只显示相应的数据，方法是使用jquery中的on click方法将数组传递给loadData函数。但是，这些按钮中的每一个都会在单击时冻结网页。

以下是codepen的链接：https://codepen.io/KevinM818/pen/OjMYYO

$(document).ready(function() {
  var service = "";
  var datePublished = "";

  var manualImage = "";
  var manualText = "";
  var manualLinkText = "";
  var manualLink = "";

  var twitterUsername = "";
  var twitterTweet = "";

  var instaImage = "";
  var instaUsername = "";
  var instaCaption = "";

  var manualItems = [];
  var twitterItems = [];
  var instagramItems = [];

  function loadItems(array) {
    //Loop through the response array to load the data into the webpage
    for (var i = 0; i < array.length; i++) {
      service = array[i].service_name;

      manualImage = array[i].item_data.image_url;
      manualText = array[i].item_data.text;
      manualLinkText = array[i].item_data.link_text;
      manualLink = array[i].item_data.link;

      twitterTweet = array[i].item_data.tweet;

      instaCaption = array[i].item_data.caption;

      if (service === "Twitter" || service === "Instagram") {
        username = array[i].item_data.user.username;
      }

      switch (service) {
        case "Manual":
          $("#main").append(
            "<div class='item'><div class='manual-item'><img src='https://image.ibb.co/g66jfQ/aff.png' alt='AFF' id='manual-icon'><img src=" +
              manualImage +
              " id='manual-thumbnail'><p>" +
              manualText +
              "</p><h4><a href=" +
              manualLink +
              " target='_blank'>" +
              manualLinkText +
              "</a></h4></div></div>"
          );
          manualItems.push(array[i]);
          break;
        case "Twitter":
          $("#main").append(
            "<div class='item'><div class='twitter-item'><img src='https://image.ibb.co/mGHqLQ/twitter.png' alt='twitter' id='twitter-icon'><h4>" +
              username +
              "</h4><p>" +
              linkifyTweet(twitterTweet) +
              "</p></div></div>"
          );
          twitterItems.push(array[i]);
          break;
        case "Instagram":
          instaImage = array[i].item_data.image.medium;
          $("#main").append(
            "<div class='item'><div class='insta-item'><img src='https://image.ibb.co/hXkc0Q/instagram.png' alt='instagram' id='insta-icon'><img src=" +
              instaImage +
              " alt='instagram image' id='insta-thumbnail'><h4>" +
              username +
              "</h4><p>" +
              linkifyInstagram(instaCaption) +
              "</p></div></div>"
          );
          instagramItems.push(array[i]);
          break;
      }
    }
  }

  function getItems() {
    $.ajax({
      type: "GET",
      url: "https://api.myjson.com/bins/warm5",
      dataType: "json",
      success: function(response) {
        //Sort the JSON response by the date the item was published from most recent to oldest
        for (var i = 0; i < response.items.length; i++) {
          datePublished = response.items[i].item_published;
          datePublished = new Date(datePublished.substring(0, 10));
        }

        response.items.sort(function(a, b) {
          return a.item_published > b.item_published
            ? -1
            : a.item_published < b.item_published ? 1 : 0;
        });

        loadItems(response.items);
      }
    });
  }

  function linkifyTweet(text) {
    var base_url = "http://twitter.com/";
    var hashtag_part = "hashtag/";
    // convert URLs into links
    text = text.replace(
      /(>|<a[^<>]+href=['"])?(https?:\/\/([-a-z0-9]+\.)+[a-z]{2,5}(\/[-a-z0-9!#()\/?&.,]*[^ !#?().,])?)/gi,
      function($0, $1, $2) {
        return $1 ? $0 : '<a href="' + $2 + '" target="_blank">' + $2 + "</a>";
      }
    );
    // convert @mentions into links
    text = text.replace(/(:\/\/|>)?(@([_a-z0-9-]+))/gi, function(
      $0,
      $1,
      $2,
      $3
    ) {
      return $1
        ? $0
        : '<a href="' +
            base_url +
            $3 +
            '" title="Follow ' +
            $3 +
            '" target="_blank">@' +
            $3 +
            "</a>";
    });
    // convert #hashtags into tag search links
    text = text.replace(/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi, function(
      $0,
      $1,
      $2,
      $3
    ) {
      return $1
        ? $0
        : '<a href="' +
            base_url +
            hashtag_part +
            $3 +
            '" title="Search tag: ' +
            $3 +
            '" target="_blank">#' +
            $3 +
            "</a>";
    });

    return text;
  }

  function linkifyInstagram(text) {
    var base_url = "http://instagram.com/";
    var hashtag_part = "explore/tags/";
    // convert @mentions into links
    text = text.replace(/(:\/\/|>)?(@([_a-z0-9-]+))/gi, function(
      $0,
      $1,
      $2,
      $3
    ) {
      return $1
        ? $0
        : '<a href="' +
            base_url +
            $3 +
            '" title="Follow ' +
            $3 +
            '" target="_blank">@' +
            $3 +
            "</a>";
    });
    // convert #hashtags into tag search links
    text = text.replace(/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi, function(
      $0,
      $1,
      $2,
      $3
    ) {
      return $1
        ? $0
        : '<a href="' +
            base_url +
            hashtag_part +
            $3 +
            '" title="Search tag: ' +
            $3 +
            '" target="_blank">#' +
            $3 +
            "</a>";
    });

    return text;
  }

  getItems();
  console.log(manualItems);
  console.log(twitterItems);
  console.log(instagramItems);

  $("#manualBtn").on("click", function() {
    $("#main").html("");
    loadItems(manualItems);
    manualItems = [];
  });

  $("#twitterBtn").on("click", function() {
    $("#main").html("");
    loadItems(twitterItems);
    twitterItems = [];
  });

  $("#instagramBtn").on("click", function() {
    $("#main").html("");
    loadItems(instagramItems);
    instagramItems = [];
  });

  $("#loadMore").on("click", getItems);
});

Answer 1

我用工作小提琴分叉你的codepen。问题实际上很容易找到。

当你的for-loop运行时，你会反复在switch语句中填充源数组。所以我为loadItems函数创建了第二个参数，名为“is_filter”。当您点击其中一个过滤器按钮时，我们会将true作为值传递。如果设置了值，我们只需忽略在for-loop中填充源数组。希望这有助于您朝着正确的方向前进：

https://codepen.io/anon/pen/zdrgpp

这是其中一个过滤器的摘录：

loadItems(manualItems, true);

功能声明：

function loadItems(array, is_filter = false) { ...

在这里你有内联小提琴：

$(document).ready(function() {

    var service = "";
    var datePublished = "";

    var manualImage = "";
    var manualText = "";
    var manualLinkText = "";
    var manualLink = "";

    var twitterUsername = "";
    var twitterTweet = "";

    var instaImage = "";
    var instaUsername = "";
    var instaCaption = "";

    var manualItems = [];
    var twitterItems = [];
    var instagramItems = [];

    function loadItems(array, is_filter = false) {

        for (var i = 0; i < array.length; i++) {

            service = array[i].service_name;

            manualImage = array[i].item_data.image_url;
            manualText = array[i].item_data.text;
            manualLinkText = array[i].item_data.link_text;
            manualLink = array[i].item_data.link;

            twitterTweet = array[i].item_data.tweet;

            instaCaption = array[i].item_data.caption;

            if (service === "Twitter" || service === "Instagram") {
                username = array[i].item_data.user.username;
            }

            switch (service) {
                case "Manual":
                    $("#main").append("<div class='item'><div class='manual-item'><img src='https://image.ibb.co/g66jfQ/aff.png' alt='AFF' id='manual-icon'><img src=" + manualImage + " id='manual-thumbnail'><p>" + manualText + "</p><h4><a href=" + manualLink + " target='_blank'>" + manualLinkText + "</a></h4></div></div>");
                if(!is_filter){
                  manualItems.push(array[i]);
                }
                    break;
                case "Twitter":
                    $("#main").append("<div class='item'><div class='twitter-item'><img src='https://image.ibb.co/mGHqLQ/twitter.png' alt='twitter' id='twitter-icon'><h4>" + username + "</h4><p>" + linkifyTweet(twitterTweet) + "</p></div></div>");
                if(!is_filter){
                    twitterItems.push(array[i]);
                }
                    break;
                case "Instagram":
                    instaImage = array[i].item_data.image.medium;
                    $("#main").append("<div class='item'><div class='insta-item'><img src='https://image.ibb.co/hXkc0Q/instagram.png' alt='instagram' id='insta-icon'><img src=" + instaImage + " alt='instagram image' id='insta-thumbnail'><h4>" + username + "</h4><p>" + linkifyInstagram(instaCaption) + "</p></div></div>");
                if(!is_filter){
                    instagramItems.push(array[i]);
                }
                    break;
            }
        }
    }

    function getItems() {
        $.ajax({
            type: "GET",
            url: "https://api.myjson.com/bins/warm5",
            dataType: "json",
            success: function(response) {
                //Sort the JSON response by the date the item was published from most recent to oldest
                for (var i = 0; i < response.items.length; i++) {
                    datePublished = response.items[i].item_published;
                    datePublished = new Date(datePublished.substring(0, 10));
                }

                response.items.sort(function(a, b) {
                    return (a.item_published > b.item_published) ? -1 : ((a.item_published < b.item_published) ? 1 : 0);
                });

                loadItems(response.items);
            }
        });
    }

    function linkifyTweet(text) {
        var base_url = 'http://twitter.com/';
        var hashtag_part = 'hashtag/';
        // convert URLs into links  
        text = text.replace(
            /(>|<a[^<>]+href=['"])?(https?:\/\/([-a-z0-9]+\.)+[a-z]{2,5}(\/[-a-z0-9!#()\/?&.,]*[^ !#?().,])?)/gi,
            function($0, $1, $2) {
                return ($1 ? $0 : '<a href="' + $2 + '" target="_blank">' + $2 +
                    '</a>');
            });
        // convert @mentions into links  
        text = text.replace(
            /(:\/\/|>)?(@([_a-z0-9-]+))/gi,
            function($0, $1, $2, $3) {
                return ($1 ? $0 : '<a href="' + base_url + $3 +
                    '" title="Follow ' + $3 + '" target="_blank">@' + $3 +
                    '</a>');
            });
        // convert #hashtags into tag search links  
        text = text.replace(
            /(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi,
            function($0, $1, $2, $3) {
                return ($1 ? $0 : '<a href="' + base_url + hashtag_part + $3 +
                    '" title="Search tag: ' + $3 + '" target="_blank">#' + $3 +
                    '</a>');
            });

        return text;
    }

    function linkifyInstagram(text) {
        var base_url = 'http://instagram.com/';
        var hashtag_part = 'explore/tags/';
        // convert @mentions into links  
        text = text.replace(
            /(:\/\/|>)?(@([_a-z0-9-]+))/gi,
            function($0, $1, $2, $3) {
                return ($1 ? $0 : '<a href="' + base_url + $3 +
                    '" title="Follow ' + $3 + '" target="_blank">@' + $3 +
                    '</a>');
            });
        // convert #hashtags into tag search links  
        text = text.replace(
            /(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi,
            function($0, $1, $2, $3) {
                return ($1 ? $0 : '<a href="' + base_url + hashtag_part + $3 +
                    '" title="Search tag: ' + $3 + '" target="_blank">#' + $3 +
                    '</a>');
            });

        return text;
    }

    getItems();
  
    $("#manualBtn").on('click', function(){
    	$("#main").html("");
    	loadItems(manualItems, true);
    	manualItems = [];
    });

    $("#twitterBtn").on('click', function(){
    	$("#main").html("");
    	loadItems(twitterItems, true);
    	twitterItems = [];
    });

    $("#instagramBtn").on('click',function(){
    	$("#main").html("");
    	loadItems(instagramItems, true);
    	instagramItems = [];
    });

    $("#loadMore").on("click", getItems);

});

.buttonGroup {
  width: 90%;
  margin: 30px auto; }

.wrapper {
  width: 90%;
  margin: 50px auto;
  -moz-column-width: 330px;
  -webkit-column-width: 330px;
  column-width: 330px;
  -moz-column-count: 5;
  -webkit-column-count: 5;
  column-count: 5;
  -moz-column-gap: 5px;
  -webkit-column-gap: 5px;
  column-gap: 5px; }

.item {
  position: center;
  display: inline-block;
  margin: 20px 0; }

.item:hover {
  transition: 0.5s;
  background-color: rgba(222, 234, 237, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }

.manual-item {
  width: 330px;
  border: 1px solid #dae3e5;
  border-radius: 5px;
  padding: 27px; }
  .manual-item #manual-icon {
    display: block;
    border-radius: 5px;
    position: relative;
    bottom: 40px;
    margin-bottom: -66px;
    z-index: 1; }
  .manual-item #manual-thumbnail {
    width: 100%;
    height: auto;
    padding-bottom: 10px; }
  .manual-item p {
    font-size: 1em; }
  .manual-item h4 a {
    color: red; }

.twitter-item {
  width: 330px;
  border: 1px solid #dae3e5;
  border-radius: 5px;
  padding: 27px; }
  .twitter-item #twitter-icon {
    border-radius: 5px;
    position: relative;
    bottom: 42px;
    margin-bottom: -35px;
    z-index: 1; }
  .twitter-item h4 {
    font-weight: bold;
    font-size: 1.75em;
    text-align: center; }
  .twitter-item p {
    font-size: 1.25em;
    text-align: center;
    padding: 15px 0; }
    .twitter-item p a {
      color: red; }

.insta-item {
  width: 330px;
  border: 1px solid #dae3e5;
  border-radius: 5px;
  padding: 27px; }
  .insta-item #insta-icon {
    display: block;
    border-radius: 5px;
    position: relative;
    bottom: 40px;
    margin-bottom: -66px;
    z-index: 1; }
  .insta-item #insta-thumbnail {
    width: 100%;
    height: auto;
    padding-bottom: 10px; }
  .insta-item h4 {
    font-weight: bold; }
  .insta-item p {
    font-size: 1.25em; }
    .insta-item p a {
      color: red; }

.buttonWrapper {
  text-align: center;
  padding-bottom: 50px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="buttonGroup">
        <div class="btn-group btn-group-justified">
            <div class="btn-group" role="group">
                <button id="manualBtn" type="button" class="btn btn-default">Manual</button>
            </div>
            <div class="btn-group" role="group">
                <button id="twitterBtn" type="button" class="btn btn-default">Twitter</button>
            </div>
            <div class="btn-group" role="group">
                <button id="instagramBtn" type="button" class="btn btn-default">Instagram</button>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div id="main">
        </div>
    </div>
    <div class="buttonWrapper">
        <button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button>
    </div>
</body>