Javascriptの読込が完了しないとリンク遷移できない

現状は、Ajaxを使用して別ページの一部を抜き出して表示させているのですが、
これの読込が終わらないとリンクをクリックしても遷移しない状態になってしまいます。

実際には読み込んでいるaタグはもっとたくさんあります。
b_count には数字が入ります。

改善策などあればアドバイス頂けると助かります。
よろしくお願いいたします。

###現状のコード

<script>
$(function() {
  $(".checkBoxListLink > li > a").each(function(i) {
    var me=$(this);
    $.ajax({
    url:me.attr('href'),
    type:"get",
    dataType:"html",
    success:function(data){
    	var b_count = $(data).find('#sort_val').text();
    	console.log( b_count );
        if (b_count==0) {
            me.attr({"href":"javascript:void(0); return false;","style":"text-decoration:line-through;"});
			me.append(' (<span class="strong_blue">' + b_count + '</span>)');
        }else{
			me.append(' (<span class="strong_orange">' + b_count + '</span>)');
        }
    },
    });
  });
});
</script>
<ul class="checkBoxListLink">
    <li><a href="/?s=&chara[]=4762">タワーマンション</a></li>
    <li><a href="/?s=&chara[]=4771">デザイナーズ</a></li>
    <li><a href="/?s=&chara[]=4761">分譲タイプ</a></li>
    <li><a href="/?s=&year=1">新築/築1年以内</a></li>
    <li><a href="/?s=&time=3">徒歩3分以内</a></li>
</ul>

m.ts10806

2017/06/12 00:09

HTMLコードもあわせてご提示ください。<script>と書いているからにはHTML直書きでしょうから、全体があると助かります。

igaiga

2017/06/12 00:30

お手数おかけします。関連するHTMLコードをいれました。

行動規範の内容に同意します

回答1件

ベストアンサー

a要素がclickされたら、ajaxをabortすればいいですね。
以下の検証コードを書きました。

test1.php～test5.phpは以下のようです。

php
1test1.php
2<div>0</div>
3
4test2.php
5<div>123</div>
6
7test3.php
8<?php
9sleep(5);
10?><div>123</div>
11
12test4.php
13<?php
14sleep(10);
15?><div>123</div>
16
17test5.php
18<?php
19sleep(15);
20?><div>123</div>

JavaScriptにはabortするコードを入れてます。
ただ、jQuery.ajaxの戻り値jqXHRを配列に入れて、a要素がclickされたら、abortを送っているだけなので、jqXHRが存在しているかとか確認してません。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title></title>
6<style>
7  .strong_blue {font-weight:bold; color:blue;}
8  .strong_orange {font-weight:bold; color:orange;}
9</style>
10<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
11<script>
12$(function() {
13  var ajax = new Array();
14  $(".checkBoxListLink > li > a").each(function(i) {
15    $(this).on("click", function() {
16      ajax.forEach(function(el) {
17        el.abort();
18      });
19    });
20    var me=$(this);
21    ajax.push($.ajax({
22      url:me.attr('href'),
23      type:"get",
24      dataType:"html",
25      success:function(data){
26        var b_count = $(data).text();
27        if (b_count==0) {
28            me.attr({"href":"javascript:void(0); return false;","style":"text-decoration:line-through;"});
29            me.append(' (<span class="strong_blue">' + b_count + '</span>)');
30        }else{
31            me.append(' (<span class="strong_orange">' + b_count + '</span>)');
32        }
33      },
34    }));
35  });
36});
37</script>
38</head>
39<body>
40<ul class="checkBoxListLink">
41    <li><a href="http://localhost/test1.php">タワーマンション</a></li>
42    <li><a href="http://localhost/test2.php">デザイナーズ</a></li>
43    <li><a href="http://localhost/test3.php">分譲タイプ</a></li>
44    <li><a href="http://localhost/test4.php">新築/築1年以内</a></li>
45    <li><a href="http://localhost/test5.php">徒歩3分以内</a></li>
46    /* 上の5行をコピーした1000個以上の要素 */
47</ul>
48</body>
49</html>
50```abortを入れないと`test3.php`のクリックは相当時間がかかりますが、abortを入れた後は5秒で表示されるので、ブロックされている様子はないようです。