Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

[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

Post navigation

Previous Post:

[PHP] PHPExcel을 이용한 엑셀파일 읽기

Next Post:

[PHP] 아마존 Product Advertising API 간단 예제

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • SK 세븐모바일 유심 셀프교체
  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes