0
JSONレスポンスのデータを使用して、pinterestのようなWebページを作成する作業を行いました。各JSONオブジェクトには、service_nameキーがあります。これは、マニュアル、ツイッター、またはインスタントグラムのいずれかです。私は3つのフィルターボタンを作成して、jQueryのon clickメソッドを使用してloadData関数に配列を渡すだけで、Webページがそれぞれのデータを表示するようにしました。ただし、これらの各ボタンは、クリックするとWebページをフリーズします。私は作業フィドルであなたの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);
});
あなたのforループは無限です。 – Difster
あなたのループを叩く前に、 'array.length'が何であるかを調べると、本当に高いかもしれません。 – Difster
下のフィドルがあなたを助けてくれましたか？ – hallleron