Смещение цикла, обход массива исключая дубли, полный ликбез
Добрый день, подскажите как лучше всего решить проблему. До меня к сожалению не доходит, не так часто пишу на js.
Имеется динамический массив (запросы к vk.api), по domready делаю 1 запрос, чтобы оперативно обрабатывать массив и показывать его содержимое. Далее, например по клику на тычку "more" я совершаю еще запросы и дописываю в массив новые значения. Но у меня, каждый раз по клику на тычку "more" обрабатываются и дублируются данные Сейчас пробовал с методом push (до этого был concat :18 строчка), чтобы у меня был всегда набор из "актуальных" данных, но у меня руки из {_o_} пример в песочнице http://plnkr.co/edit/wSWybiotn3xYGIfroa3g Буду рад любым объяснениям
var url = "https://api.vkontakte.ru/method/wall.get?domain=adme";
var offset = 0;
var postsCount = 0;
var result = [];
function newPost() {
$.ajax({
url: url,
dataType: "jsonp",
data: {
count: 10,
offset: offset
},
success: function(data) {
var posts = data.response;
postsCount = posts.shift();
result.push(posts);
offset += 10;
parsePostsRaw();
}
});
}
function parsePostsRaw() {
for (var i=0; i < result.length; i++) {
for (var j = 0; j < result[i].length; j++) {
var current = result[i][j].id;
var text = $("<p>", {'class': 'text', text: result[i][j].text})
var img = result[i][j].attachment.photo.src;
var id = result[i][j].id;
var li = $("<li>", {}).html("<p>"+result[i][j].text+"</p>"+"<img src='"+img+"' />"+"<span>"+id+"</span>");
$('#resultText').append(li);
}
}
}
window.addEventListener("DOMContentLoaded", function () {
newPost();
$('#more').click(function () {
newPost();
});
});
|
tybys,
нажать Ещё ? внизу
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style type="text/css">
#resultText{
display: flex;
flex-wrap: wrap;
}
#resultText > li{
display: inline-block;
word-wrap: break-word;
width: 340px;
list-style-type: none;
background: #D2B48C none repeat scroll 0 0;
border: 1px solid #ffcc00;
border-radius: 16px;
box-sizing: border-box;
overflow: hidden;
vertical-align: middle;
padding: 20px;
margin: 5px;
}
#more{
color: #FFFFFF;
font-size: 48px;
font-weight: normal;
display: block;
line-height: 48px;
margin: 0 auto;
width: 100%;
}
#resultText > li.end{
text-align: center;
background: black;
color: white;
}
.al-pic {
border-radius: 15px;
display: block;
height: 180px;
margin: 0 0 9px;
width: 300px;
}
a.al-title {
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
line-height: 28px;
margin: 0 0 6px;
}
.al-title {
font-size: 22px;
font-weight: normal;
line-height: 28px;
margin: 0 0 6px;
}
.cssload-container {
position: relative;
z-index: 4;
margin: 0 auto;
display: none;
width: 166px;
height: 78px;
list-style: none;
border: 2px solid rgba(0,0,0,0.4);
border-radius: 39px;
}
.cssload-loader{
position: absolute;
z-index: 3;
margin: 0 auto;
left: -40px;
right: 0;
top: 50%;
margin-top: -29px;
width: 97px;
height: 58px;
list-style: none;
}
ul.cssload-loader li{
background-color: rgb(255, 255, 255);
width: 10px;
height: 10px;
float: right;
margin-right: 5px !important;
box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-o-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-ms-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
}
.cssload-loader li:first-child{
animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-o-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-ms-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-webkit-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-moz-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
}
.cssload-loader li:nth-child(2){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
}
.cssload-loader li:nth-child(3){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
}
.cssload-loader li:nth-child(4){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
}
.cssload-loader li:nth-child(5){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
}
.cssload-loader li:nth-child(6){
animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
}
@keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-o-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-ms-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-webkit-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-moz-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(window).load(function () {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
};
var url = "https://api.vkontakte.ru/method/wall.get?domain=adme";
var offset = 0;
var postsCount = 0;
var old = {};
function newPost() {
$.ajax({
url: url,
dataType: "jsonp",
data: {
count: 10,
offset: rand(1, postsCount, true)
},
success: function(data) {
var posts = data.response;
postsCount = posts.shift();
offset += 10;
parse(posts);
}
});
}
function parse(data) {
var liEnd = $(".end"), current = liEnd.prev(), n = 0;
$.each(data, function(indx, el) {
var id = el.id,
attach = el.attachments, img, a;
if (!old[id] && attach && attach.length > 1) {
old[id] = true;
var li = $("<li/>");
$.each(attach, function(indx, el) {
var photo = el.photo;
if (photo) {
var src = photo.src_big;
if (src && !img) {
img = $("<img/>", {
src: src,
width: "300",
height: "180",
"class": "al-pic"
});
img.appendTo(li)
}
}
var link = el.link;
if (link) {
a = $("<a/>", {
"class": "al-title",
href: link.url,
text: link.title
});
a.appendTo(li);
var h = $("<h3/>", {
"class": "al-title",
html: link.description
});
h.appendTo(li)
}
});
img && a && li.insertBefore(liEnd) && n++
}
});
!n && newPost();
n && $('.cssload-container').hide() && $('#more').show()
current.length && current.next().scrollTo(1E3)
};
newPost();
$('#more').click(function (event) {
event.preventDefault();
$('#more').hide();
$('.cssload-container').show()
newPost();
});
}); </script>
</head>
<body>
<table id="TableA"></table>
<div id="DivA"></div>
<ul id="resultText"><li class="end"><a href="#" id="more" class="al-title">Ещё ?</a><h3 class="al-title">Мне нужно больше интересных статей</h3>
<div class="cssload-container">
<ul class="cssload-loader">
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
</li></ul>
</body>
</html>
|
рони, спасибо вам за помощь, я ваш предыдущий вариант разобрал и понял, этот тоже разберу сегодня.
Я его чуть-чуть изменил только, академического интереса ради хочу без jquery обойтись, или оставить только айджекс, ибо мне непонятно как проще и без большого кол-ва кода написать кросдоменный запрос |
tybys,
структуру незнаю json (где-то есть информация?), но данные в json неполные, поэтому сделал фильтрацию на наличие ссылки и одного фото -- и если в пришедшем ответе таких нет или пришли повторные данные идёт новый запрос строки 298 и 299. ещё бы ввести в обьект old -- длину и проверять чтоб неуйти в бесконечный запрос, когда все данные выберутся. (их у вас много, но на всякий) первый запрос с нуля, остальные случайно из общего числа ... ориентировался что первый элемент, что это и есть длина всех данных. |
| Часовой пояс GMT +3, время: 02:28. |