0

こんにちは、私は JavaScript と Jquery の初心者です。ここでやろうとしているのは、setTimeout 関数を使用して、onclick() 関数で渡されたテキストをアルファベットごとに出力することです。何が間違っているのかわかりません。ご協力いただきありがとうございます。

HTML

<div>
         <p id='myTxt'></p>
</div>
 <input type='button' value='Submit' onclick="imScrolling('Hello World!!', 500, 0, document.getElementById('myTxt'))">

私の Script.js ファイル

 function imScrolling(scrollTxt, interval, index, target)
    {
        //alert(scrollTxt + " " + interval + " " + scrollTxt.length + " " + index + " " + target.id);
       while(index < scrollTxt.length)
      {
         //alert(scrollTxt[index]);
         setTimeout(function (scrollTxt, interval, index, target)
                {
                   $('#myTxt').append(scrollTxt[index]);
                   }, interval);
         index++;       
       }
    }

また、パラメータを setTimeout() に渡さないと、index や interval などのパラメータがアラート メッセージで未定義として表示されることに気付きました。なぜそうなのですか？

4

5 に答える 5

1

問題は非同期ですが、関数は同期的にsetTimeout実行され続けるため、すぐに何度も設定されます。これは私が提案するものです：whilesetTimeout

function imScrolling(scrollTxt, interval, index, target)
{
   setTimeout(function (){
       $('#myTxt').append(scrollTxt[index]);
       if(index < scrollTxt.length){
        imScrolling(scrollTxt, interval, index+1, target);
       }
       }, interval);
}

このようにして、「同時に」ではなく、最初の発火後に間隔を再度設定します。デモ

于 2013-09-26T14:33:16.580 に答える
0

HTML ではイベント属性を使用しないようにしてください。

jQuery がそのお手伝いをします。

試す：

HTML

<div id="container">
    <p id="myTxt"></p>
    <input type="button" value="Submit" id="your-button" /> 
</div>

ジャバスクリプト

$(function () // jquery dom ready
{
    $("#container")
        .on("click", "#your-button", function ()
        {
            var yourText = "Hello World!!".split('');

            for (var i = 0; i < yourText.length; i++)
            {
                $("#myTxt")
                    .append(yourText[i])
                    .append("<br/>"); // just to line break
            }
        }
});

働くフィドル

于 2013-09-26T14:34:14.403 に答える
0

まず、setTimeout で呼び出す関数から始めましょう。

function (scrollTxt, interval, index, target) {
  $('#myTxt').append(scrollTxt[index]);
}

後で呼び出される 4 つのパラメーターを持つ関数を定義しました。問題は、 setTimeout に指定された関数が呼び出されたときにパラメーターが渡されないため、無名関数 scrollTxt 内で、間隔、インデックス、およびターゲットが未定義になることです。

この問題を解決するには、クロージャーを使用できます。無名関数内では、無名関数が定義されているスコープで使用可能な変数を使用できます。

 var a = 5;
 function () {
    console.log(a); // 5
 }

もう1つ問題があります。使用される変数は、コピーではなく実際の変数です。したがって、外部で変数を変更すると、無名関数内の値も変更されます。

var a = 5;
var f = function () {
  console.log(a);
}
a = 10;
f(); // outputs 10

あなたのために変化する変数はインデックスです。それを克服するには、反復ごとにコピーを作成する必要があります。それを関数のパラメータとして与えるよりも良い方法はありますか?

for (var i=0; i<10; i++) {
  setTimeout((function(new_i) {
     return function () {
       console.log(new_i);
     };
  })(i),100);
}
// outputs 0,1,2,3,4,5,6,7,8,9

これを適用すると、問題を簡単に解決できます (そして、どのように解決しているかを理解できます)。

于 2013-09-26T14:34:26.910 に答える