animate預設時長所帶來的問題及解決

2022-09-08 12:18:13 字數 1246 閱讀 5786

做乙個進度條長度逐漸減少的動畫,當進度條長度小於等於0時,關閉動畫,並彈出透明底板顯示新提示。

初始**如下:

//

設定進度條初始長度

var progresslength = 180;

//設定乙個定時器

var timer = setinterval(function

() );

console.log("hh");

//如果進度條走到盡頭

if (progresslength <= 0)

}, 50);

遇到問題:

進度條遞減的速度快於動畫速度,導致動畫還沒執行完,progresslength就已經≤0,底板就彈出來了。
首先,導致問題的原因是:

animate動畫執行有預設時長,即1000(1s),就是第二個引數。

而先前設定的定時器執行時長是50,導致兩廂不匹配,即animate函式域裡外不是乙個速度。

解決方法:(消滅時間差)

1.設定animate第二個引數,使執行時長等於外面定時器的執行時長;

(不推薦,因為兩個函式之間總有執行上的時間差)

//

設定進度條初始長度

var progresslength = 180;

//設定乙個定時器

var timer = setinterval(function

() ,50);

console.log("hh");

//如果進度條走到盡頭

if (progresslength <= 0)

},50);

2.改animate為css,這樣就變成靜態函式,沒有時間差了

//

設定進度條初始長度

var progresslength = 180;

//設定乙個定時器

var timer = setinterval(function

() );

console.log("hh");

//如果進度條走到盡頭

if (progresslength <= 0)

}, 50);

猛龍所帶來的震動

最近真的是完全沉浸入了學習之中,不覺之間發現高中那個對學院派路線不屑一顧的我已經成為了其中乙個典型代表。席間休息的時候猛龍打我 了,恍惚之間一連猜錯了幾次最後才知道是猛龍。猛龍與我先策聊了一下之後便開始很自然地過渡到大學畢業找工作這個話題,先前我以為猛龍只是在談他自己的事,後來猛龍才轉到了關於畢業生...

NRV優化所帶來的困惑

我們知道要了解編譯器在做什麼,nrv優化應該是乙個無法避免的問題,下面來看乙個例子 include iostream 從這兩個程式的執行來看nrv優化好像並不是那麼如你想象中的好 using namespace std include class text private double arry 1...

ToList 所帶來的效能影響

前幾天優化師弟寫的 有乙個地方給我留下很深刻的印象,就是我發現他總是將plinq的結果tolist 然後再返回給主程式,對於這一點我十分不解,於是去問他是什麼原因,得到的答案很幽默 因為習慣。有時候對於方法的不甚了解加上 習慣 往往是程式效能和穩定性終結者,就拿這個case來說吧,原始 如下 var...