Тикерная лента JQuery ускоряется с каждым обновлением
Я использую плагин для ленты тикеров ( https://github.com/tetsuwo/jquery-news-ticker) для отображения новостей внизу моей веб-страницы, которая обновляется каждый час, но каждый раз, когда обновляется скорость ленты тикеров. увеличивается, и я не понимаю, почему, так как я новичок в JQuery.
Ниже приводится страница содержимого.
<script>
$(document).ready(function(){
//trigger ticker
$('.ticker.news').newsTicker({
//debug:true,
animationType: 'scroll',
classNamePrefix: 'ticker-',
interval:5000,
scrollSecond:0.5,
scrollStep:5
});
});
</script>
<div class="wrapper">
<div class="ticker news">
<ul class="ticker-items">
<li class="ticker-item">1. This is news item 1</li>
<li class="ticker-item">2. This is news item 2</li>
<li class="ticker-item">3. This is news item 3</li>
</ul>
</div>
</div>
На следующей странице есть функция обновления, но для этого примера я настроил обновление каждые 15 секунд.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test ticker</title>
<style>
div#content_sub {
display:table;
height:50px;
position:relative;
width:200px;
}
.wrapper {
display:table-cell;
vertical-align:middle;
position:relative;
width:100%;
}
.ticker.news {
height:100%;
overflow:hidden;
position:relative;
width:auto;
}
.ticker.news .ticker-items {
display:block;
height:100%;
list-style:none;
position:relative;
}
.ticker.news .ticker-item {
display:none;
height:100%;
line-height:100%;
list-style:none;
position:absolute;
white-space:nowrap;
}
</style>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="java/jquery.news-ticker.min.js"></script>
<script>
function loadContentSub(){ //load content
$.ajax({
type: "POST",
url: 'content.php',
dataType: "html",
success: function(val) {
$('#content_sub').html(val);
},
complete: function(){
setTimeout(loadContentSub,15000); //refresh the content every 15 seconds
var currentTime = new Date();
console.log('sub content loaded at '+currentTime);
}
});
}
$(document).ready(function(){
loadContentSub();
});
</script>
</head>
<body>
<div id="content_sub" class="content sub"></div>
</body>
</html>
Я не верю, что проблема с последними 2 страницами, но, поскольку я все еще изучаю JQuery, это может быть.
Единственная другая страница, которая используется с тикером, - это страница JavaScript, где, как мне кажется, проблема, но я не уверен в этом.
;(function($) {
$.fn.newsTicker = function(options) {
var
$root = $(this),
settings = {},
privates = {},
first = true,
pointer = 0;
// extended setting object
settings = $.extend({
debug : false,
itemTitleChars : 10,
minItem : 0,
maxItem : 10,
scrollStep : 5,
scrollSecond : 0.07,
interval : 2000,
animationType : 'scroll',
classNamePrefix : 'jq-news-ticker-'
}, options);
/**
* Debug
*
* @param mixed
* @return none
*/
this.debug = function(a) {
if (settings.debug) {
console.log(a);
}
};
/**
* Get Configuration
*
* @return object
*/
this.getConfig = function() {
return settings;
};
/**
* Set Pointer
*
* @param int
* @return int
*/
this.setPointer = function(id) {
self.debug('setPointer = ' + id);
pointer = id;
return self.getPointer();
};
/**
* Get Pointer
*
* @return int
*/
this.getPointer = function() {
self.debug('getPointer = ' + pointer);
return pointer;
};
/**
* Get Class Name
*
* @param string
* @param bool
* @return string
*/
this.getClassName = function(val, dotNothing) {
return (dotNothing ? '' : '.') + settings.classNamePrefix + val;
};
/**
* Get All Items
*
* @return object
*/
this.getItems = function() {
return $root.find(self.getClassName('item'));
};
/**
* Get Item
*
* @param int
* @return object
*/
this.getItem = function(idx) {
return $root.find(self.getClassName('item')).eq(idx);
};
/**
* Get Current Item
*
* @return object
*/
this.getCurrentItem = function() {
return self.getItem(pointer);
};
/**
* Animate Callback
*
* @param int
* @return none
*/
this.animateCallback = function() {
pointer++;
if (self.getItems().length <= pointer) {
pointer = 0;
}
self.setPointer(pointer);
self.start();
};
/**
* Scroll Func
*
* @param int
* @return none
*/
privates.scrollFunc = function() {
var $target = self.getCurrentItem();
var pos = $target.position();
if (privates.targetPoint > pos.left) {
$target.css('left', privates.targetPoint - 100);
window.setTimeout(self.animateCallback, settings.interval);
return;
}
$target.css('left', pos.left - settings.scrollStep);
window.setTimeout(arguments.callee, settings.scrollSecond * 1000);
};
/**
* Set Item
*
* @param int
* @return none
*/
this.setItem = function(idx) {
first = false;
// hide all & remove focus
$root.find(self.getClassName('item-focus'))
.removeClass(self.getClassName('item-focus', true))
.hide();
// show one
var $target = self.getItem(idx);
$target.addClass(self.getClassName('item-focus', true));
self.debug('root.width = ' + $root.width());
self.debug('target.width = ' + $target.width());
var isLong = $root.width() < $target.width();
privates.targetPoint = isLong ? $root.width() - $target.width() : 0;
privates.targetPoint -= $root.width();
switch(settings.animationType) {
case 'scroll':
var addWidth = parseInt($root.css('paddingLeft')) + parseInt($root.css('paddingRight'));
$target.css('left', $root.width() + addWidth).show();
$target.animate(
{ left: 0 },
function() {
window.setTimeout(privates.scrollFunc, 1000);
}
);
break;
default:
$target.fadeIn(self.animateCallback);
break;
}
};
/**
* Start
*
* @return none
*/
this.start = function() {
self.setItem(pointer);
};
/**
* Tick!
*
* @return none
*/
this.tick = function() {
var $items = self.getItems();
self.debug($items.length);
if (first) {
return self.start();
}
window.setTimeout(
self.start,
settings.interval
);
};
// settings
this.debug(settings);
// fix reserved-variable
self = this;
$(function() {
var $items = self.getItems();
// if no item, add new item
if ($items.length < 1) {
self.debug('Not Found News');
return;
}
self.tick();
});
return this;
};
})(jQuery);
Любая помощь по этой проблеме будет принята с благодарностью.