बारी-बारी से आगे पाश के लिए javascsript निष्पादित और पिछड़े

Question

नीचे

मैं क्या करने की कोशिश कर रहा हूँ, मात्रा में एक सरणी के माध्यम से पुनरावृति हिस्सा करने के लिए हिस्सा से यात्रा की दिशा बारी है अपडेट किया गया। उलझन में? तो मैं हूं। उदाहरण के लिए, यदि मैं 25 तत्वों के साथ एक सरणी के माध्यम से लूप करना चाहता हूं, लेकिन मैं इसे इस क्रम में करना चाहता हूं: 0, 1, 2, 3, 4, 9, 8, 7, 6, 5, 10 , 11, 12, 13, 14, 1 9, 18, 17, 16, 15, 20, 21, 22, 23, 24, ऐसा करने का सबसे प्रभावी तरीका क्या होगा? मैं कुछ स्केलेबल ढूंढ रहा हूं क्योंकि अब जिस सरणी के साथ मैं काम कर रहा हूं वह वास्तव में 225 तत्व है और मैं इसे 15 तत्वों में घुमाने के लिए चाहता हूं, लेकिन यह किसी बिंदु पर बदल सकता है। अब तक, एकमात्र तरीका मैंने पाया है कि वास्तव में काम करता है कि पुनरावृत्ति क्रम को दूसरी सरणी में हार्ड-वायर करना है और उसके बाद मूल सरणी के सूचकांक प्राप्त करने के सामान्य तरीके से इसे फिर से चालू करना है। लेकिन वह बेकार है। किसी भी तरह की सहायता का स्वागत किया जाएगा।

@ बर्गि ने कुछ नमूना कोड के लिए कहा। कृपया मुझे बहुत ज्यादा मत मारो। मैं अभी भी एक नोब हूं:

function zeroPadNumber(theNumber, thePadding) { 
    var thePaddedNumber = thePadding.substring(0, (thePadding.length - theNumber.length)) + theNumber; 
    return thePaddedNumber; 
} 

var thisTile = 225; 
var waveLoop = 15; 
function mosaicWave() { 
    var theStartNum = thisTile; 
    for (w = 0; w < 15; w++) { 
     var theNum = theStartNum - w; 
     var theNumString = String(theNum); 
     var thePaddedNum = zeroPadNumber(theNumString, "000"); 
     var theImgName = "sm_" + thePaddedNum; 
     var theNewSrc = theImgFolder + theImgName + "bg.gif"; 
     document.images[theImgName].src = theNewSrc; 
     thisTile = theNum - 1; 
     if (waveLoop < 15) { 
      var prevStartTile = theStartNum + 15; 
      var thePrevNum = prevStartTile - w; 
      var thePrevNumString = String(thePrevNum); 
      var thePrevPaddedNum = zeroPadNumber(thePrevNumString, "000"); 
      var thePrevName = "sm_" + thePrevPaddedNum; 
      var thePrevSrc = theImgFolder + thePrevName + ".gif"; 
      document.images[thePrevName].src = thePrevSrc; 
     } 
    } 
    if (waveLoop == 1) { 
     var lastWave = function() { 
      var theStartNum = 15; 
      for (c = 0; c < 15; c++) { 
       var theNum = theStartNum - c; 
       var theNumString = String(theNum); 
       var thePaddedNum = zeroPadNumber(theNumString, "000"); 
       var theImgName = "sm_" + thePaddedNum; 
       var theNewSrc = theImgFolder + theImgName + ".gif"; 
       document.images[theImgName].src = theNewSrc; 
      } 
     } 
     setTimeout(lastWave, 100); 
     waveLoop = 15; 
     thisTile = 225; 
    } else { 
     waveLoop--; 
     setTimeout(mosaicWave, 100); 
    } 
} 

यह स्निपेट एक अलग एनीमेशन करता है। यह मैट्रिक्स के निचले दाएं कोने से शुरू होता है और नीचे की पंक्ति में 15 टाइल्स "चालू" होता है। तो यह एक पंक्ति को ऊपर ले जाता है, उस पंक्ति में टाइल्स को चालू करता है और पिछली पंक्ति में टाइल्स को बंद कर देता है। और तब तक जब तक शीर्ष पंक्ति चालू नहीं होती है। वास्तव में शीर्ष-नीचे सर्पिन प्रभाव से बहुत दूर नहीं है, मैं नए फ़ंक्शन में हासिल करने की कोशिश कर रहा हूं। प्रत्येक पंक्ति पर उल्टा आदेश मुख्य चीज मुझे रोक रहा था। ऐसा कहा जा रहा है कि उपर्युक्त कोड को अनुकूलित करने के बारे में कोई भी सुझाव भी सराहना की जाएगी।

अद्यतन 1:

मेरे लिए

, इस तरह यह काम करना चाहिए लगता है, लेकिन ऐसा नहीं है। क्या कोई समस्या को देख सकता है?

var loopRange = 225; 
var blockRange = 15; 
var theDirection = 1; 
var weaveLoop = 0; 

function mosaicWeave() { 
    var curObj, curSrc, lastObj, lastSrc; 
    var toggleLeadTile = function() { 
     alert(curSrc); 
     curObj.src = curSrc; 
    }; 
    var toggleLastTile = function() { 
     lastObj.src = lastSrc; 
    }; 
    while (weaveLoop < loopRange) { 
     imgNum = weaveLoop + 1; 
     imgName = "sm_" + zeroPadNumber(String(imgNum), "000"); 
     if (imgNum < 15) { 
      //handle first row 
      curObj = document.images[imgName]; 
      curSrc = theImgFolder + imgName + "bg.gif"; 
      window.setTimeout(toggleLeadTile, 100); 
     } else if (imgNum == 225) { 
      //handle last row 
      curObj = document.images[imgName].src; 
      curSrc = theImgFolder + imgName + "bg.gif"; 
      window.setTimeout(toggleLeadTile, 100); 
      for (i = 211; i < 226; i++) { 
       lastImgName = "sm_" + ((weaveLoop + 1) - 15); 
       lastObj = document.images[lastImgName]; 
       lastSrc = theImgFolder + lastImgName + ".gif"; 
       window.setTimeout(toggleLastTile, 100); 
      } 
     } else { 
      //handle middle rows 
      lastImgName = "sm_" + ((weaveLoop + 1) - 15); 
      curObj = document.images[imgName]; 
      curSrc = theImgFolder + imgName + "bg.gif"; 
      lastObj = document.images[lastImgName]; 
      lastSrc = theImgFolder + lastImgName + ".gif"; 
      window.setTimeout(toggleLeadTile, 100); 
      window.setTimeout(toggleLastTile, 100); 
     } 
     if (weaveLoop % blockRange == (theDirection == -1 ? 0 : blockRange - 1)) { 
      theDirection *= -1; 
      weaveLoop += blockRange; 
     } else { 
      weaveLoop += theDirection; 
     } 
    } 
} 

अद्यतन 2: हर किसी के इनपुट के लिए

धन्यवाद। यह काम करता है:

var resetLoop = 1; 
var weaveArray = new Array(225); 
var weaveRange = 15, weaveDirection = 1, weaveIndex = 0, wInitLoop = 0; 

function mosaicWeave() { 
    while (weaveIndex < 225) { 
     weaveArray[wInitLoop] = weaveIndex + 1; 
     if (weaveIndex % weaveRange == (weaveDirection == -1 ? 0 : weaveRange - 1)) { 
      weaveDirection *= -1; 
      weaveIndex += weaveRange; 
     } else { 
      weaveIndex += weaveDirection; 
     } 
     wInitLoop++; 
    } 
    mWeaveOn(); 
} 

function mWeaveOff() { 
    var theNumString = String(weaveArray[resetLoop - 16]); 
    var theImgName = "sm_" + zeroPadNumber(theNumString, "000"); 
    document.images[theImgName].src = "images/" + theImgName + ".gif"; 
    mosaicArray[resetLoop - 1] = 0; 
    resetLoop++; 
    if (resetLoop < 226) { 
     setTimeout(mWeaveOn, 25); 
    } else if (resetLoop > 225 && resetLoop <= 240) { 
      setTimeout(mWeaveOff, 25); 
    } else { 
     resetLoop = 1; 
    } 
} 

function mWeaveOn() { 
    var theNumString = String(weaveArray[resetLoop - 1]); 
    var theImgName = "sm_" + zeroPadNumber(theNumString, "000"); 
    document.images[theImgName].src = "images/" + theImgName + "bg.gif"; 
    mosaicArray[resetLoop - 1] = 1; 
    if (resetLoop < 16) { 
     resetLoop++; 
     setTimeout(mWeaveOn, 25); 
    } else { 
     setTimeout(mWeaveOff, 25); 
    } 
} 

क्या किसी के पास कोई राय है कि ऐसा करने का एक और अधिक प्रभावी तरीका है? या विभिन्न प्लेटफॉर्म/ब्राउज़र या विभिन्न परिस्थितियों में यह कैसे हो सकता है इस पर एक सिर? एक बार फिर धन्यवाद।

Answer 1

इस समारोह (, अपने उदाहरण में 5) एक सरणी और एक ब्लॉकसाइज स्वीकार करता

function forwardAndBack(arr, blocksize){ 
    var i, j, l = arr.length ; 
    for (i = 0 ; i < l ; i++){ 
    if (i % (2 * blocksize) > (blocksize - 1)){ 
     j = i + (blocksize - (2*(i % blocksize)))-1 ; 
    } 
    else { 
     j = i ; 
    } 
    arr[j] && myFunction(arr[j]) ; // In case you've gone too high 
    } 
} 

इस तरह उपयोग किया:

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24] ; 
var result = [] ; 
function myFunction(x){result.push(x)} ; 

forwardAndBack(arr, 5); 

console.log(result) ; // returns [0, 1, 2, 3, 4, 9, 8, 7, 6, 5, 10, 11, 12, 13, 14, 19, 18, 17, 16, 15, 20, 21, 22, 23, 24] 

Answer 2

यह एक लचीला समाधान जहां आप के रूप में ब्लॉकसाइज बदल सकते हैं जरूरत है।

var index, max = 25; 
for (var i = 0; i < max; i++) { 
    if (parseInt(i/5) % 2) 
    index = parseInt(i/5)*5 + 4 - i % 5; 
    else 
    index = i; 
    // use index as array index 
    foo(index); 
} 

Fiddle

आप हमेशा पाँच की एक बहु है, तो आप मुश्किल पांच तत्वों से अधिक यात्रा कोड और एक बाहरी पाश जो max/5 लिए मायने रखता है और सही hardcoded यात्रा करने के लिए स्विच कर सकते हैं।

var index, max = 25; 
for (var i=0; i<max/5; i++) { 
    if (i%2) { 
    foo(i*5+4); 
    foo(i*5+3); 
    foo(i*5+2); 
    foo(i*5+1); 
    foo(i*5+0); 
    } else { 
    foo(i*5+0); 
    foo(i*5+1); 
    foo(i*5+2); 
    foo(i*5+3); 
    foo(i*5+4); 
    } 
} 

Fiddle

Answer 3

var arr = [0,1,2,3,4,5,6,7,8,9,10,11,11,13,14,15,16,17,18,19,20,21,22,23,24], 
    i = 0, 
    j = arr.length, 
    tmp, 
    chunk = 5; 

while(i < j) { 
    tmp = arr.slice(i, i+=chunk); 
    if ((i/chunk) % 2 == 0) { 
     tmp = tmp.reverse(); 
    } 
    console.log(tmp); 
} 

​The demo.

Answer 4

मुझे लगता है कि सबसे सरल और स्पष्ट समाधान घोंसला करने के लिए दो लूस होगा:

var arr = new Array(25), 
    chunksize = 5; 
for (var i=0; i<arr.length; i+=chunksize) 
    if (i % (chunksize*2)) 
     for (var j=i+chunksize-1; j>=i; j--) 
      exec(j); 
    else 
     for (var j=i; j<i+chunksize; j++) 
      exec(j); 

हालांकि, आप केवल एक लूप और लूप काउंटर के साथ भी जा सकते हैं। दाएं धब्बे (4, 5, 14, 15, ...) में दिशा (वृद्धि/कमी) बदल जाएगी और काउंटर एक चंक्सिज़ (4 → 9, 5 → 10, 14 → 1 9, ...):

var arr = new Array(25), 
    chunksize = 5; 

var dir = 1, 
    i = 0; 
while (i<arr.length) { 
    exec(i); // or whatever you need to do 
    if (i % chunksize == (dir==-1 ? 0 : chunksize - 1)) { 
     dir *= -1; 
     i += chunksize; 
    } else 
     i += dir; 
} 

या, के लिए बयान से एक में:

for (var dir=1, i=0; i<arr.length; i+= (i+1)%chunksize == (dir==-1) ? (dir*=-1) && chunksize : dir) 
    exec(i); // or whatever you need to do