到目前为止，我已经在网上浏览了5个小时，我无法找到解决问题的方法，即： 我写了一个插件，它对任何给定的元素进行打字效果，如果我在一个元素上使用它，它只能正常工作，但是当我想在第二个元素上使用它时，它只执行第二个元素，这就是为什么： 在我的插件中，我使用了一些＆＃34; setInterval＆＃34; s来进行特定速度的输入并检查字母以便延迟某些字母，当我同时调用插件两次或更多时设置新的问题就会出现问题变量的值，并将区间与新设置的值冲突，并将所有内容混淆。
这是代码：
(function ($) {
//typing effect for text
$.fn.typingText = function (options) {
var setting = $.extend({
//the starting point ==> *(it starts typing when the scrollbar hit the starting point)
start: 0,
//the user given delay character ==> *(it delays the typing when it hits this character) ==> *(must be a character not a digit or alphabet)
delayChar: '.',
//the speed of typer ==> *(must be at least 50)
speed: 100,
//the delay duration when it hits delaying characters ==> *(delaying characters are ? ! . and any other given character in delayChar variable)
delay: 500
}, options);
if (setting.speed < 50) {
setting.speed = 50;
}
if (setting.delay < 100) {
setting.delay = 100;
}
setting.delayChar = setting.delayChar.slice(0, 1);
window.that = $(this);
if ($(document).scrollTop() >= setting.start) {
$(this).css('display', 'block');
window.text = $(this).text();
window.textLength = window.text.length;
window.char = 0;
setting.delayChar = '^\\' + setting.delayChar;
$(this).text('');
$(this).html('<span class="textLine"></span>');
$(this).append('<span class="blinkingLine">|</span>');
window.blinking = setInterval(function () {
$('.blinkingLine').animate({
opacity: 0
}, 300);
setTimeout(function () {
$('.blinkingLine').animate({
opacity: 1
}, 300);
}, 300);
}, 600);
function type() {
window.that.children('.textLine').text(window.text.substr(0, window.char));
window.lastChar = window.that.children('.textLine').text().slice(window.that.children('.textLine').text().length - 1);
window.char++;
if (window.char > window.textLength) {
window.that.children('.textLine').text(window.that.children('.textLine').text().substr(0, window.textLength));
$('.blinkingLine').remove();
clearInterval(window.startTyping);
clearInterval(window.blinking);
clearInterval(window.checking);
}
}
window.timer = 0;
window.startTyping = setInterval(type, setting.speed);
window.checking = setInterval(function () {
if (!window.delaying || typeof window.delaying == 'undefined' || window.timer >= setting.delay) {
if (window.lastChar.match('^\\?') || window.lastChar.match('^\\.') || window.lastChar.match('^\\!') || window.lastChar.match(setting.delayChar)) {
if (window.timer >= setting.delay) {
window.timer = 0;
window.char++;
type();
window.startTyping = setInterval(type, setting.speed);
window.delaying = false;
} else {
window.delaying = true;
clearInterval(window.startTyping);
window.startTyping = null;
}
}
} else {
window.timer = window.timer + 50;
}
}, 50);
}
};
})(jQuery);
$(function () {
$('#title').typingText();
$('#title2').typingText();
});
这是查看代码和问题的jsFiddle。
我知道它必须对我编写插件的方法有所帮助，但我在网上尝试了一些建议，例如面向对象的插件编写，但仍然无法提出解决方案！任何帮助或建议将不胜感激。
答案 0 :(得分：2)
自己找到了答案，问题是我必须将所有变量和间隔定义为私有变量或函数，这样它们就不会被覆盖，然后我不得不添加一小段代码来实现我的功能通过所有选定的元素重复自己。
这是我最终完成的最终代码，它完美无缺。
查看此jsFiddle
(function($){
//typing effect for text
//start of the plugin
var typingTextFunc= function(options, elem){
var setting= $.extend({
//the starting point
//*(it starts typing when the scrollbar hit the starting point)
start:0,
//the user given delay character
//*(it delays the typing when it hits elem character) ==> *(must be a character not a digit or alphabet)
delayChar:'.',
//the speed of typer
//*(must be at least 50)
speed:100,
//the delay duration when it hits delaying characters
//*(delaying characters are ? ! . and any other given character in delayChar variable)
delay:500
},options);
if(setting.speed<50){
setting.speed=50;
}
if(setting.delay<100){
setting.delay=100;
}
setting.delayChar=setting.delayChar.slice(0,1);
var that=$(elem);
if($(document).scrollTop()>=setting.start){
$(elem).css('display','block');
var text=$(elem).text();
var textLength=text.length;
var char=0;
$(elem).text('');
$(elem).html('<span class="textLine"></span>');
$(elem).append('<span class="blinkingLine">|</span>');
var blinking=setInterval(function(){
that.children('.blinkingLine').animate({opacity:0},300);
setTimeout(function(){
that.children('.blinkingLine').animate({opacity:1},300);
},300);
},600);
var lastChar='';
function type(){
that.children('.textLine').text(text.substr(0,char));
lastChar=that.children('.textLine').text().slice(that.children('.textLine').text().length-1);
char++;
if(char>textLength){
that.children('.textLine').text(that.children('.textLine').text().substr(0,textLength));
that.children('.blinkingLine').remove();
clearInterval(startTyping);
clearInterval(blinking);
clearInterval(checking);
}
}
var timer=0;
var delaying=false;
var startTyping=setInterval(type,setting.speed);
var checking= setInterval(function(){
if(typeof delaying=='undefined' || timer>=setting.delay || delaying==false){
if(lastChar=='?' || lastChar=='.' || lastChar=='!' || lastChar==setting.delayChar){
if(timer>=setting.delay){
timer=0;
char++;
type();
startTyping=setInterval(type,setting.speed);
delaying=false;
}
else{
delaying=true;
clearInterval(startTyping);
startTyping=null;
}
}
}
else{
timer=timer+50;
}
},50);
}
};
$.fn.typingText= function(options){
if($(this).data('typed')) return;
return $(this).each(function(){
typingTextFunc(options, this);
$(this).data('typed',true);
});
};
//end of the plugin
}(jQuery));
$(function(){
$('#title1').typingText();
$('#title2').typingText();
});