लूप केवल एक स्पैन टैग को जोड़ने के दौरान सरणी में अंतिम स्ट्रिंग प्रदर्शित कर रहा है

मैं हर 1.5 सेकंड में स्पैन टैग में शब्द बदलना चाहता हूं लेकिन अब तक यह केवल सरणी सूची में अंतिम शब्द प्रदर्शित कर रहा है।लूप केवल एक स्पैन टैग को जोड़ने के दौरान सरणी में अंतिम स्ट्रिंग प्रदर्शित कर रहा है

यहाँ मेरी जावास्क्रिप्ट

var list = [ 
    "websites", 
    "user interfaces" 
]; 


setInterval(function() { 
for(var count = 0; count < list.length; count++) { 
    document.getElementById("word").innerHTML = list[count]; 
}}, 1500);

यहाँ है और एचटीएमएल

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
    <span id="word"></span> 
</body> 
</html>

स्रोत

2017-03-04 Jake123

क्योंकि आप एक में पाश के लिए पूर्ण चलाने एकल सेट अंतराल कॉल। फॉर लूप को सेट इंटरवल कॉल –

के बीच रोका नहीं गया है, आप लूप नहीं चाहते हैं .... यह अंतराल ट्रिगर होने पर हर बार चलाएगा।तो हर बार – charlietfl

पर एक ही परिणाम उत्पन्न करने पर हर बार एक ही लूप चलता है लेकिन जब मैं setInterval को हटाता हूं और केवल लूप के लिए यह वही काम करता है .. – Jake123

आप एक for पाश की जरूरत नहीं है, बस का उपयोग करें कि setInterval, अपने counter या और भी आसान का उपयोग कर सरणी हेरफेर:

var list = [ 
 
    "websites", 
 
    "user interfaces", 
 
    "cool neh?" 
 
]; 
 

 
var count = 0; // Separate your count 
 

 
function changeWord() { // Separate your concerns 
 
    document.getElementById("word").innerHTML = list[count]; 
 
    count = ++count % list.length; // Increment and loop counter 
 
} 
 

 
changeWord();     // First run, 
 
setInterval(changeWord, 1500); // Subsequent loops

<span id="word"></span>

हैं आप एक का उपयोग नहीं करना चाहते हैं counter लेकिन यह सरणी हेरफेर का उपयोग कर कार्य करें:

var list = [ 
 
    "websites", 
 
    "user interfaces", 
 
    "cool neh?" 
 
]; 
 

 
var ELWord = document.getElementById("word"); // Cache elements you use often 
 

 

 
function changeWord() { 
 
    ELWord.innerHTML = list[0]; // Use always the first key. 
 
    list.push(list.shift()); // Push the first key to the end of list. 
 
} 
 

 
changeWord();     
 
setInterval(changeWord, 1500);

<span id="word"></span>

पी.एस: उलटा list.unshift(list.pop()) का उपयोग कर के रूप में आप देख सकते हैं here होगा।

प्रदर्शन-वार counter का उपयोग करके समाधान तेजी से होना चाहिए लेकिन आपके पास एक छोटा ऐरे है इसलिए अंतर को कोई चिंता नहीं उठानी चाहिए।

स्रोत

2017-03-04 12:40:10

धन्यवाद, मैं यही देख रहा था! – Jake123

@ जेक 123 मैंने यदि आप रुचि रखते हैं तो ऐरे मैनिपुलेशन का उपयोग करके इसे करने के लिए एक (उचित) तरीका भी जोड़ा है - 'काउंटर' का उपयोग करने के बजाय। आपका स्वागत है। हैप्पी कोडिंग –

ठीक है इसके लिए धन्यवाद, सिर्फ एक और प्रश्न है कि प्रत्येक शब्द को फीका करने का कोई तरीका है? – Jake123

आप इस कोशिश करना चाहते हो सकता है। लूपिंग नहीं, बस प्रत्येक 1.5 सेकंड में changeWord फ़ंक्शन को कॉल करें।

var list = [ 
 
     "websites", 
 
     "user interfaces" 
 
    ]; 
 
    var count = 0; 
 

 
    function changeWord() { 
 
     document.getElementById("word").innerHTML = list[count]; 
 
     count = count < list.length-1 ? count+1 : 0; 
 
    } 
 

 
    setInterval(function() { changeWord(); }, 1500);

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <span id="word"></span> 
 
</body> 
 
</html>

स्रोत

2017-03-04 12:39:07 Mazz

बेहतर उपयोग setTimeout। प्रत्येक पुनरावृत्ति का अपना टाइमआउट होना चाहिए। See also

(() => { 
 
    const words = document.querySelector('#words'); 
 
    typeWords([ 
 
     "web sites", 
 
     "user interfaces", 
 
     "rare items", 
 
     "other stuff", 
 
     "lizard sites", 
 
     "ftp sites", 
 
     "makebelief sites", 
 
     "fake news sites", 
 
     "et cetera" 
 
    ]); 
 

 
    function typeWords(list) { 
 
    list.push(list.shift()) && (words.innerHTML = list[list.length-1]); 
 
    setTimeout(() => typeWords(list), 1500); 
 
    } 
 
})();

<div id="words"></div>

स्रोत

2017-03-04 12:43:22 KooiInc

-1

अपने कोड के साथ समस्या यह है जब भी अपने अंतराल समारोह कहा जाता है, पाश निष्पादित हो और तत्व प्रिंट क्योंकि आप प्रत्येक यात्रा पर पूरे innerHTML की जगह हो रहा है। यदि आप अंतराल के बाद बार-बार संपूर्ण सूची तत्व मुद्रित करना चाहते हैं तो आप निम्न कोड आज़मा सकते हैं।

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<span id="word"></span> 
</body>

जावास्क्रिप्ट कोड:

var list = [ 
"websites", 
"user interfaces" 
]; 
var count=0; 
function print() 
{ 
    document.getElementById("word").innerHTML = list[count]; 
count += 1; 
count%=list.length; 
} 
setInterval(print(), 1000);

स्रोत

2017-03-04 12:58:35

मैं इस प्रकार setTimeout() द्वारा यह काम करना होगा,

function loopTextContent(a, el, dur = 1500){ 
 
    var i = -1, 
 
    len = a.length, 
 
    STID = 0, 
 
    looper = _ => (el.textContent = a[i = ++i%len], STID = setTimeout(looper,dur)); 
 
    looper(); 
 
    return _ => STID; 
 
} 
 

 
var list = ["websites", "user interfaces", "user experience", "whatever"], 
 
getSTID = loopTextContent(list, document.getElementById("word")); 
 
setTimeout(_ => clearTimeout(getSTID()),10000);

<span id="word"></span>

स्रोत

2017-03-04 15:46:05 Redu

लूप केवल एक स्पैन टैग को जोड़ने के दौरान सरणी में अंतिम स्ट्रिंग प्रदर्शित कर रहा है

उत्तर

संबंधित मुद्दे