Question

我试图让计时器键入文本，删除它，然后重复，循环浏览标题标题数组。我可以写一次，但我对计时器的有限理解阻碍了我。这是我到目前为止所拥有的。在我将写入逻辑放入其自己的方法之前，我可以从控制台手动调用writeText（）插件，但现在它只能工作一次。这是link to a codepen

<!-- HTML -->
<div class="holder">
<h1><span>Lorem ipsum dolor sit amet, consectetur adipisicing </span><img id="cursor" src="https://copy.com/oBelwqiCr3Fa"></h1>
</div>


// Javascript
 // counter and array of text to type in the header
 var headerArray = [
         "The Internet can't teach you about marketing",
         "I wish I learned in art school", 
         "Every Successful Startup Eventually Does"
     ],
     headerCounter = 0,
     // headerContainer = $('.holder h1 span'),
     headerContainer = document.querySelector('#cursor').previousElementSibling;


 // function to type the text
 function typeText(i) {
     $('.holder h1 span').text('').writeText(headerArray[i]);
     headerCounter++;

     if (headerCounter >= headerArray.length) {
         headerCounter = 0;
     }
 }


 $(function() {
     // fades cursor in and out
     setInterval(function () {
         $('#cursor').fadeToggle(400);
     }, 400);

     // calls function to type the text
     setInterval(typeText(headerCounter), 5000);
 });



 // plugin that writes out the text like a typewriter
 (function($) {
     $.fn.writeText = function(content) {
         var contentArray = content.split(""),
             current = 0,
             elem = this;

         setInterval(function() {
             if(current < contentArray.length) {
                 elem.text(elem.text() + contentArray[current++]);
             }
         }, 50);
     };
 })(jQuery);


 // plugin that deletes text
 (function($) {
     $.fn.deleteText = function(content) {
         var newContent = content.slice(0, content.length - 1),
             current = 0,
             elem = this;

         setInterval(function() {
             if (elem.text().length == 0) {
                 elem.text(newContent);
                 current--;
             }
         }, 50);
     };
 })(jQuery);

Answer 1

要扩展cookie怪物所说的内容，setInterval没有做到你期望的原因是因为setInterval的第一个参数应该是一个函数，但调用{{1}没有返回一个函数。我怀疑你的意思是typeText(headerCounter)是一个间隔调用的函数。如果是这样，那么而不是：

typeText

你应该这样做：

 setInterval(typeText(headerCounter), 5000);

当然，这会导致函数setInterval(typeText, 5000);失败。快速而肮脏的解决方法是删除参数声明并将global用作索引：

typeText

全局变量的弊端超出了你的问题的范围，所以我只是指出你可以用闭包来实现它，并避免使用全局变量。

Answer 2

这是一个工作小提琴＆＃34;您的代码包含一些修改：http://jsfiddle.net/P8tc9/

HTML：

<h1>
<span id="header">asdf</span>
<span id="cursor">|</span>
</h1>

JS：

 // counter and array of text to type in the header
 var headerArray = [
     "The Internet can't teach you about marketing",
     "I wish I learned in art school",
     "Every Successful Startup Eventually Does"],
     headerCounter = 0;

 // plugin that writes out the text like a typewriter
 (function ($) {
     $.fn.writeText = function (content, finishedCallback) {
         var contentArray = content.split(""),
             current = 0,
             elem = this,
             intervalHandle;

         intervalHandle = setInterval(function () {
             if (current < contentArray.length) {
                 elem.text(elem.text() + contentArray[current++]);
             } else {
                 // dispose the interval.
                 clearInterval(intervalHandle);

                 finishedCallback();
             }
         }, 50);
     };
 })(jQuery);




 // fades cursor in and out
 setInterval(function () {
     $('#cursor').fadeToggle(400);
 }, 400);

 // function to type the text
 function typeNext() {
     var text = headerArray[headerCounter];
     headerCounter++;
     if (headerCounter >= headerArray.length) {
         headerCounter = 0;
     }

     $('#header').text('').writeText(text, waitThenTypeNext);
 }

 function waitThenTypeNext() {
     setTimeout(typeNext, 2000);
 }

 // get things started.
 typeNext();

Javascript setInterval / Timeout不工作

2 个答案: