cpu內(nèi)存已被榨干
有人和我一樣 在第三個(gè)球去往300px的路上卡的走不動(dòng)的嗎 ?遞歸加回調(diào) 直接把內(nèi)存和cpu榨干了
慕先生8870512
2017-06-08
3 回答
舉報(bào)
0/150
提交
取消
2017-06-08
粗粗想了一下有可能是第一個(gè)方法 回調(diào)函數(shù)一直占用著上一層的函數(shù) 形成了閉包 而resolve()是再調(diào)用了整個(gè)函數(shù) 不是從函數(shù)內(nèi)部去調(diào)用 所以不會(huì)對(duì)資源有大量損耗。 也可能我寫的第一段代碼本身有問(wèn)題。。
2017-06-08
同樣的邏輯 但是這段代碼流暢運(yùn)行
var ball1 = document.querySelector('.ball1');
?var ball2 = document.querySelector('.ball2');
?var ball3 = document.querySelector('.ball3');
var Promise = window.Promise; ? ?//Bug window 寫成了Window
? ? ? ? function promiseAnimate(ball,distance){
? ? ? ? ? ? return new Promise(function(resolve,reject){
? ? ? ? ? ? ? ? function _animate(){ ? //此處在函數(shù)前加上_是私有函數(shù)書寫規(guī)范
? ? ? ? ? ? ? ? ? ? var marginLeft = parseInt(ball.style.marginLeft,10);
? ? ? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? ? ? if ( marginLeft == distance) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? resolve();
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? if (marginLeft < distance) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft++;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? marginLeft--;
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ball.style.marginLeft = marginLeft+'px'; ? //Bug此處需要加px
? ? ? ? ? ? ? ? ? ? ? ? _animate();
? ? ? ? ? ? ? ? ? ? },13);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? _animate();
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? promiseAnimate(ball1,100)
? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? return promiseAnimate(ball2,200)
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? return promiseAnimate(ball3,300)
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? return promiseAnimate(ball3,150)
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? return promiseAnimate(ball2,150)
? ? ? ? ? ? })
? ? ? ? ? ? .then(function(){
? ? ? ? ? ? ? ? return promiseAnimate(ball1,150)
? ? ? ? ? ? })
2017-06-08
這是第一段榨干內(nèi)存的代碼
var ball1 = document.querySelector('.ball1');
? ? ? ? var ball2 = document.querySelector('.ball2');
? ? ? ? var ball3 = document.querySelector('.ball3');
? ? ? ? // function animate(ball,distance,callback){
? ? ? ? // ? ? var marginLeft = parseInt(ball.style.marginLeft,10);
? ? ? ? // ? ? setTimeout(function(){
? ? ? ? // ? ? ? ? if ( marginLeft == distance) {
? ? ? ? // ? ? ? ? ? ? callback && callback();
? ? ? ? // ? ? ? ? } else {
? ? ? ? // ? ? ? ? ? ? if (marginLeft < distance) {
? ? ? ? // ? ? ? ? ? ? ? ? marginLeft++;
? ? ? ? // ? ? ? ? ? ? }else {
? ? ? ? // ? ? ? ? ? ? ? ? marginLeft--;
? ? ? ? // ? ? ? ? ? ? }
? ? ? ? // ? ? ? ? }
? ? ? ? // ? ? ? ? ball.style.marginLeft = marginLeft+'px'; ? //Bug此處需要加px
? ? ? ? // ? ? ? ? animate(ball,distance,callback);
? ? ? ? // ? ? },13);
? ? ? ? // }
? ? ? ? // animate(ball1,100,function(){
? ? ? ? // ? ? animate(ball2,200,function(){
? ? ? ? // ? ? ? ? animate(ball3,300,function(){
? ? ? ? // ? ? ? ? ? ? animate(ball3,150,function(){
? ? ? ? // ? ? ? ? ? ? ? ? animate(ball2,150,function(){
? ? ? ? // ? ? ? ? ? ? ? ? ? ? animate(ball1,150,function(){
? ? ? ? // ? ? ? ? ? ? ? ? ? ? ? ? //回調(diào)結(jié)束
? ? ? ? // ? ? ? ? ? ? ? ? ? ? })
? ? ? ? // ? ? ? ? ? ? ? ? })
? ? ? ? // ? ? ? ? ? ? })
? ? ? ? // ? ? ? ? })
? ? ? ? // ? ? })
? ? ? ? // })