[jQuery] AJAX 요청을 Queue를 이용해 순차적으로 처리하기

2017-05-31 by 편리

ajax 요청 처리를 순차적으로 처리할 필요성이 있어 jQuery ajaxQueue 플러그인을 사용했다.

데모 : http://demo.codepub.net/ajaxqueue.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajaxQueue Demo</title>
<link rel="stylesheet" href="./css/common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./js/jquery.ajaxQueue.min.js"></script>
</head>
<body>
<div class="ajaxQueue">
    <ul id="ajaxQueue-items">
        <li>Item 0</li>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul id="ajaxQueue-output">
    </ul>
    <div><button type="button" id="run">Run</button></div>
</div>

<script>
$(function() {
    $("#run").on("click", function(e) {
        e.preventDefault();

        $("#ajaxQueue-output").html("");

        $("#ajaxQueue-items li").each(function(idx) {
            $.ajaxQueue({
                url: "./ajaxqueue.php",
                data: { html : "["+idx+"] "+$(this).html() },
                type: 'POST',
                success: function(data) {
                    $("#ajaxQueue-output").append($("<li>", { html: data }));
                }
            });
        });
    });
});
</script>
</body>
</html>

ajaxqueue.html 파일이다.

<?php
$html = $_POST['html'];

usleep(500000);

die($html);

ajaxqueue.php 파일이다.

/* ajaxQueue */
.ajaxQueue ul {
    display: inline-block;
    width: 300px;
}
.ajaxQueue ul li {
    line-height: 1.5em;
    font-size:1.2em;
}

common.css 파일에 추가된 코드이다.

플러그인 : https://github.com/gnarf/jquery-ajaxQueue
js 파일 : jquery.ajaxQueue.min.zip

Leave a Reply Cancel reply