2017-08-08 127 views
0

在我的JavaScript文件,我書面方式一段代碼數次:JS減少重複的代碼

setTimeout(function() { 
    myFunction("this is a message"); 
}, 500); 

setTimeout(function() { 
    myFunction("this is another message"); 
}, 500); 

setTimeout(function() { 
    myFunction("this is another message again"); 
}, 500); 
... 

所以,我想避免重寫的setTimeout所有的時間。

是否有另一種方法來壓縮代碼並製作更好更易讀的代碼?

謝謝!

編輯:我的目標不是按順序啓動「myFunction」。我的目標是,當我打電話給myFunction時,它總是延遲500毫秒執行。

+1

多次調用同一個函數沒有任何問題。 – zerkms

+0

'setTimeout(function(){ const messages = [「這是一條消息」,「這是另一條消息」,「這是另一條消息」]; messages.forEach(m => myFunction(m)) ; },500); ' – zerkms

+2

,你可以用一個簡單的功能,像封裝:'功能延遲(M){setTimeout的(函數(){ myFunction的(M); },500)}' – maioman

回答

1

做一個函數來包裝你的代碼

const callMyFunctionWithDelay = message => setTimeout(() => myFunction(message), 500); 

callMyFunctionWithDelay("this is called after half a second"); 
callMyFunctionWithDelay("this is another message"); 

:你可能只是這樣做複製,並讓它作爲輸入消息。

function delayMessage(msg) { 
    return setTimeout(() => { 
     myFunction(msg); 
    }, 500); 
} 

它將返回的情況下,你需要cancelTimeout取消它超時ID。然後你可以將你的代碼縮小到以下內容:

delayMessage("this is a message"); 
delayMessage("this is another message"); 
delayMessage("this is another message again"); 
3

更新:如果你想增加的延遲,你只需要把循環setTimeout外,並作出IIFE:

var msgs = ["this is a message", "this is another message", "this is another message again"]; 
for (var i = 0; i < msgs.length; i++) 
    (function (idx) { 
    setTimeout(function() { 
     myFunction(msgs[i]); 
    }, 500 * i); 
    })(i); 

工作摘錄

var msgs = ["this is a message", "this is another message", "this is another message again"]; 
 
for (var i = 0; i < msgs.length; i++) 
 
    (function(idx) { 
 
    setTimeout(function() { 
 
     myFunction(msgs[idx]); 
 
    }, (500 * i)); 
 
    })(i); 
 

 
function myFunction(msg) { 
 
    console.log(msg); 
 
}

無論如何,上述代碼在500毫秒內執行該功能。結合三者:

setTimeout(function() { 
    myFunction("this is a message"); 
    myFunction("this is another message"); 
    myFunction("this is another message again"); 
    // ... 
}, 500); 

上面的代碼和這個沒有區別。但是如果你想讓代碼看起來不錯,你可以利用循環和數組:

setTimeout(function() { 
    var msgs = ["this is a message", "this is another message", "this is another message again"]; 
    msgs.forEach(function (msg) { 
     myFunction(msg); 
    }); 
}, 500); 
+0

也沒有必要保持setTimeout中的消息/參數給myFunction,與setTimeout相同的範圍將會很好 –

+0

@przemo_li對不起,沒有理解那部分。這是寫得好嗎? –

+0

編輯(粗體),由於不便之處:( – Ommadawn

1

也許這樣?

array = ["this is a message","this is another message","this is another 
message again"]; 

for (i=0;i<array.length;i++) { 
    setTimeout(function() { 
     myFunction(array[i]); 
    }, 500); 
} 
+0

編輯(粗體),由不便之處:( – Ommadawn

1

如果您打算每次都調用相同的延遲函數,但消息是唯一發生變化的函數。如果你想要的東西更靈活,更想改變功能,消息,耽誤你可以做到這一點

const callWithDelay = (fn, message, delay) => setTimeout(fn.bind(null, message), delay); 

callWithDelay(myFunction, "this is called after half a second", 500); 
callWithDelay(myFunction, "this is gets called after 1 sec", 1000); 
1

你的意思是這樣嗎?

function myTimeout(msg, delay = 500) { 
    setTimeout(function() { 
    myFunction(msg); 
    }, delay); 
} 

function myFunction(msg){ 
    console.log(msg) 
    // or do something else .. 
} 

所以現在你可以調用myTimeout('message'),它會被推遲500 或者你可以撥打myTimeout('message', delay)在遲延是你想(如果你不總是希望500)延遲一個整數。

PS。我不確定這是你問的,但我希望它有幫助!