मैं कैसे एक पाश

Question

window.onload = -> 

    boxOrig1 = 10 
    boxOrig2 = 30 
    canvasW = 400 
    canvasH = 300 

    ctx = $("#canvas")[0].getContext('2d'); 

    draw = (origin,dimension) ->  
    ctx.clearRect(0, 0, canvasW, canvasH) 
    ctx.fillStyle = 'rgb(200,0,0)' 
    ctx.fillRect(origin + boxOrig1, boxOrig1, dimension, dimension) 
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)' 
    ctx.fillRect(origin + boxOrig2, boxOrig2, dimension, dimension) 

    for m in [10..100] by 10 
    t = setTimeout (-> draw(m, 150)), 1000 
    t.clearTimeout 
#  draw(m,150) 
#  alert m 

एक अभ्यास के रूप में Coffeescript में setTimout का उपयोग करते हैं, इसके बाद के संस्करण कोड, एक कैनवास पर एक छोटे से डिजाइन आकर्षित एक पल के लिए रुक जाते हैं, तो इसे फिर से सही करने के लिए 10 पिक्सल पुनः बनाने के लिए है।

मैं देख सकता हूं कि मैकेनिक्स ठीक काम करता है जब मैं एक चेतावनी के साथ लूप को बाधित करता हूं (जैसा कि पिछली दो टिप्पणी वाली पंक्तियों में), लेकिन मुझे सेटटाइम फ़ंक्शन के साथ अपेक्षित व्यवहार नहीं मिल रहा है। डिज़ाइन बस समय के बाद सही स्थिति पर दिखाई देता है, जो बीच में वृद्धिशील चरणों को छोड़ देता है।

मैंने अन्य उदाहरणों से ऐसा करने के कई अलग-अलग तरीकों की कोशिश की है, लेकिन यह सिर्फ मेरे दिमाग को पिघल रहा है। कोई सुझाव?

Answer 1

ज्योफ एक दृष्टिकोण (setInterval का उपयोग करने और कॉलबैक से उसे साफ़) बताया गया है, इसलिए मैं अन्य की रूपरेखा तैयार करेंगे: कॉलबैक से setTimeout का उपयोग करना । जैसे

m = 10 
do drawCallback = -> 
    draw m, 150 
    m += 10 
    setTimeout drawCallback, 1000 unless m > 100 

नोट वहाँ है कि आप के बारे में पता होना चाहिए दो दृष्टिकोण के बीच एक सूक्ष्म समय अंतर यह है कि कुछ: setInterval func, 1000 एक बार हर 1000ms समारोह चलेंगे; जंजीर setTimeout प्रत्येक फ़ंक्शन कॉल के बीच 1000 मिलीमीटर देरी रखेगा। इसलिए यदि draw ने 100ms लिया, तो कहें, जंजीर setTimeoutsetInterval func, 1100 के बराबर होगा। यह शायद कोई फर्क नहीं पड़ता, लेकिन इसके बारे में पता होना लायक है।

बोनस दृष्टिकोण: आप अपने पाश का परित्याग करने के नहीं है; तुम सिर्फ एक ही बार में यह सब से समय समाप्ति सेट कर सकते हैं:

for m in [10..100] by 10 
    do (m) -> 
    setTimeout (-> draw(m, 150)), 100 * m 

do (m) आवश्यक है, ताकि बंद setTimeout के लिए पारित m के प्रत्येक मान ही नहीं, अपने पाश में अंतिम मूल्य देखता है। इस पर अधिक जानकारी के लिए मेरा आलेख A CoffeeScript Intervention देखें।

अंत में: मुझे पता है कि यह सब पहले बहुत भ्रमित लगता है, लेकिन जेएस में समय वास्तव में बहुत आसान है क्योंकि भाषा एकल-थ्रेडेड है। इसका अर्थ यह है कि setTimeout या setInterval या किसी अन्य एसिंक फ़ंक्शन के साथ आपके द्वारा शेड्यूल किए जाने वाले ईवेंट के दौरान कभी भी नहीं होंगे, भले ही लूप अनंत हो। वे केवल तब ही होते हैं जब आपके सभी कोड निष्पादित हो जाते हैं। मैं my book on CoffeeScript में थोड़ा और विस्तार से इसके बारे में बात करता हूं।

Answer 2

यह एक setInterval के रूप में अधिक सहज व्यक्त किया जा सकता है:

window.onload = -> 

    boxOrig1 = 10 
    boxOrig2 = 30 
    canvasW = 400 
    canvasH = 300 

    ctx = document.getElementById("canvas").getContext('2d') 

    draw = (origin,dimension) -> 
    ctx.clearRect(0, 0, canvasW, canvasH) 
    ctx.fillStyle = 'rgb(200,0,0)' 
    ctx.fillRect(origin + boxOrig1, boxOrig1, dimension, dimension) 
    ctx.fillStyle = 'rgba(0, 0, 200, 0.5)' 
    ctx.fillRect(origin + boxOrig2, boxOrig2, dimension, dimension) 

    count = 10 
    timer = setInterval (-> 
    if count == 100 
     clearInterval(timer) 
    draw(count, 150); count+=10 
), 1000