0

ajax リクエストの後に受信したデータで要素をフェードインする必要があります。問題なく動作しますが、すべての要素が同時に表示されます。表示される各要素の可視性の変更の間に小さな遅延を実装することは可能ですか?

  $.ajax({        
               type: "POST",
               url: "get_values.php",
               dataType: "json",
               data: { prm_listArray : prm_list},
               success: function(res) { 
                    $.each(res, function(key, value) {
                       var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
                       $(cell).find(".cell_text").html(value.prm_value).fadeIn('slow');
                       })
                 }
            });

私は成功せずに遅延（3000）を挿入しようとしました：

$(cell).find(".cell_text").html(value.prm_value).delay(3000).fadeIn('slow');

同じ動作でタイムアウトします。

$(cell).find(".cell_text").html(value.prm_value);
                setTimeout(function() {
                    $(cell).find(".cell_text").fadeIn('slow');
                }, 3000);
4

1 に答える 1

1

変数cellは毎回forループで上書きされます。したがって、スコープ変数として定義する必要があります。

$.each(res, function(key, value) {
  var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
  (function(cell) {
    setTimeout(function() {
        $(cell).find(".cell_text").fadeIn('slow');
    }, 3000);
  })(cell);
});

追加されたテストコード：

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    var res = [
        { prm_row: 0, prm_column: 0 },
        { prm_row: 1, prm_column: 1 },
        { prm_row: 2, prm_column: 2 },
    ];
    $.each(res, function(key, value) {
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        (function(cell) {
            setTimeout(function() {
                $(cell).find(".cell_text").fadeIn('slow');
            }, 3000);
        })(cell);
    });
})
</script>
<style type="text/css">
#board .cell_text {
    display: none;
}
</style>
</head>
<body>
<table id="board">
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
</table>    
</body>
</html>

ステップバイステップ

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
    var res = [
        { prm_row: 0, prm_column: 0 },
        { prm_row: 1, prm_column: 1 },
        { prm_row: 2, prm_column: 2 },
    ];

    var f = function() {
        var value = res.shift();
        if (!value) return;
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        $(cell).find(".cell_text").fadeIn('slow');
        setTimeout(function() {
            f(res);
        }, 3000);
    };
    setTimeout(f, 3000);
})
</script>
<style type="text/css">
#board .cell_text {
    display: none;
}
</style>
</head>
<body>
<table id="board">
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
    <tr>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
        <td><span class="cell_text">x</span></td>
    </tr>
</table>    
</body>
</html>

setIntervalの使用：

    var timer = setInterval(function() {
        var value = res.shift();
        if (!value) {
            clearInterval(timer);
            return;
        }
        var cell = $('table tr:eq(' + value.prm_row + ') td:eq(' + value.prm_column + ')');
        $(cell).find(".cell_text").fadeIn('slow');
    }, 3000);
于 2012-11-29T10:59:03.540 に答える