需求:
公司推廣用的游戲需要走養(yǎng)成類劇情,人物對(duì)話上也要按照養(yǎng)成類游戲通常的設(shè)置穷吮,1. 對(duì)話逐字顯示直至完整逻翁;2. 點(diǎn)擊對(duì)話中文字之后停止逐字顯示,將剩余文字一次性補(bǔ)全捡鱼。因此做了一個(gè)簡(jiǎn)單的調(diào)研八回。
控制文字顯示的大致想法,首先是逐字setTimeout。但setTimeout的壞處缠诅,一是this指向document溶浴,二是無法用jquery鏈?zhǔn)秸{(diào)用。
因此首先尋找到了一個(gè)jquery.wait的插件管引,解決了鏈?zhǔn)秸{(diào)用的問題士败。
如何使用鏈?zhǔn)秸{(diào)用呢? 因?yàn)樽址麛?shù)可變,我先嘗試寫了一個(gè)for循環(huán)汉匙,往容器里逐字添加內(nèi)容。需求1成功解決生蚁,但需求2則無法控制(嘗試過各種方法)噩翠。我沒有對(duì)插件的代碼進(jìn)行分析,于是換了一種遞歸式寫法:
var clicked = false ;
var locate = 0 ;
var text = '李易峰邦投,中國(guó)內(nèi)地男演員伤锚、歌手、制片人志衣。1987年5月4日出生于四川成都屯援。2010年畢業(yè)于四川師范大學(xué)電影電視學(xué)院。2007年參加《加油好男兒》出道念脯,同年12月發(fā)行首張EP《四葉草》狞洋。2009年發(fā)行首張個(gè)人專輯《小先生》。2010年主演電視劇《幸福一定強(qiáng)》和《幸福最晴天》绿店,獲2011年國(guó)劇盛典最佳新演員獎(jiǎng)吉懊。2012年在《真愛謊言》中挑戰(zhàn)扮演自閉癥患者。2013年憑借電視劇《千金歸來》獲得樂視盛典最受歡迎男演員獎(jiǎng)假勿。2014年7月因電視劇《古劍奇譚》中“百里屠蘇”一角而獲得廣泛關(guān)注借嗽;同年出演 ..';
var obj = text.split("");
console.log(obj.length);
var output = $('#output');
output.on('click', function(){
clicked = true ;
console.log('click');
})
output.on("myOwnEvent", function(event, locate){
console.log(locate);
if( clicked == true ){
console.log('stop');
$(this).text(text);
}
else{
if( locate < obj.length-1 ){
locate++;
$(this).append(obj[locate]).wait(100).trigger('myOwnEvent',locate);
}
}
});
output.on('startAdd', function(event){
$(this).append(obj[locate]).wait(100).trigger('myOwnEvent',locate);
})
output.trigger('startAdd');
上面的代碼使用了自定義的event,在每添加一個(gè)字之后做一次處理转培,如果遇到clicked則停止逐字恶导,一次性顯示;否則添加下一個(gè)字浸须。
因?yàn)槭菧y(cè)試代碼惨寿,所以沒有進(jìn)行封裝,這一套機(jī)制封裝起來也應(yīng)十分方便删窒。