iT邦幫忙

0

關於多個ajax,並未做同步設定時的等待情況

  • 分享至 

  • xImage

這是我的js中其中一個函數,有多個money_btn。

$(document).ready(function () {
  $(".money_btn").each(function(){
        //$(this).click();
        var game = $(this).data('game') || '';
        var show_obj = $(this).parent().find(".money_lb").html('');
        //var show_obj = $(this).prev(".money_lb");
        ajax_get_money(game, show_obj);
  });
});
function ajax_get_money(game, show_obj) {
    var g = game || '';
    var s_obj = show_obj || '';
    console.log('ssssssg='+g);
    $.ajax({
        url: '/home/user/ajax_get_money/' + g,
        type: "GET",
        dataType: 'json',
        async:true,  //這原本沒放,故意放上去測試
        beforeSend: function () {
            console.log('g='+g);
            /*
            s_obj.hide();
            $("#money_load_gif_" + g).show();
            $(".modal_money_load_gif").show();
            
            */
        },
        success: function (data) {
            console.log(data);
            /*
            if (data.session == undefined) {
                s_obj.data('amount', data.amount);
                s_obj.text(Number(data.amount));
                if (data.amount > Number($(".tran_range_max").html())) {
                    $(".tran_range_max").html(data.amount);
                    $("#member_tran_range").data('max_amt', data.amount);
                }
                tran_total_money();
            } else {
                if (data.session == 'reload') {
                    location_reload();
                }
            }
            */
            
        },
        error: function (xhr) {
            console.log(xhr.responseText);
        },
        complete: function () {
            /*
            s_obj.show();
            $(".tran_range_max").show();
            $("#money_load_gif_" + g).hide();
            $(".modal_money_load_gif").hide();
            */
        }
    });
}

目前問題是這樣。由於是做在頁面載入時就會去做此動作。
但發生一件很奇怪,無法理解的問題。
就是我要切頁時。一定得要等到ajax運行完成才可以切頁。
不過我沒設定async。理當不需要等待才對。
(雖然後來為了確定問題,還是直接指定了非同步的參數進去)

為了怕是否是程式的問題。我還故意如上面的方式來註解掉程式碼。只保留console.log來確定運行的情況。

但還是一樣得要等所有的ajax運行完成後才能切頁。(我的天啊,這什麼怪問題)
目前實在搞不對,只好來問看看各位大神有無這樣的情況發生。
及可能還有沒有我其它沒注意到的東西存在。

重說一下切頁的意思。
就是點另外一個a連結。但還是需要等待ajax跑完後才會連過去。

幾個可能會問的問題統一回答

1.網速問題:
已確定非網速問題。因為不給他跑ajax_get_money的話,是瞬間就切頁過去了。

2.連結使用js控制:
已確定非使用js來做href指向。只是單純的點a連結。(無論任何一個連結)
不過此點我目前正在查看。程式不是我寫的。我很擔心是否有做了綁定a連結事件的程式存在造成的。

==============================================
結案:
已經找到實際的原因是什麼了。
基本上並非是因為ajax在等待的因素,而是換頁時在等待ajax的回應運行完成。
原因是伺服器的請求因素。並非是javascript的關係。

測試故意放一個跟原域名無關的連結。就可以馬上換頁過去。
所以~~~該問題目前無解了。除非做其它修正了。

看更多先前的討論...收起先前的討論...
我的天啊,這什麼怪問題,不知在問啥
說真的,就是怪問題。
真的是po上來看看有沒有人遇到。
麻煩附上你的html,不然很難知道問題在哪~
tzuchin iT邦新手 5 級 ‧ 2018-06-08 09:33:14 檢舉
請問後端是PHP嗎? 有使用 session 嗎?
你可以當沒html。只跑js就好。
問題的重點不在於html上。
我都將處理的東西註解掉了。為何還需要看html來理解問題??

如你要看的話。就當加如下的html好幾個就好了
<button class="money_btn" data-game="gg">test</button>
後端的php,當然一定有用session。
有關session的相關我也有查到過。也用了一個空運行資料,只單純回傳處理的php試過了。問題還是存在。
tzuchin iT邦新手 5 級 ‧ 2018-06-08 10:34:00 檢舉
哦,有往 session locking的方向試看看嗎?
加上 session_write_close 試試
單純處理的php程式碼只有放入
```
echo '[]';
```
做測試。
fillano iT邦超人 1 級 ‧ 2018-06-08 16:28:07 檢舉
你在本地測還是在伺服器測?另外,把php加上一行sleep(1);看看...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
wingkawa
iT邦新手 3 級 ‧ 2018-06-07 14:31:42
最佳解答

可能是網路問題?
我在本機上模擬了一下環境,網速(或者說是ajax建立client到server連線的速度)會造成這個現象
你可以試著用開發者工具的Network檢查
https://ithelp.ithome.com.tw/upload/images/20180607/20109426qv0oiekJmT.png

錄了個gif但似乎傳不上來/images/emoticon/emoticon02.gif

更新: 好像也不是這回事,似乎只是比較慢連到另一頁而已,請忽略...

看更多先前的回應...收起先前的回應...

哈!!
其實我也有用Network查看過。可以看到ajax的請求(會比較慢)
但正常ajax的請求不做同步處理的話。正常不該去影響到切頁才對的。

其本上,因的說法倒是帶給我另一個想法。
就是其實不是在等待ajax,是在等待換頁。
用了network一次又一次的查驗,發現的確很奇特的現象就是。
其實換頁的命令是有出去的,但呈現等待。

當時會誤解的情況是,它都是剛好在上面ajax都跑完200後。他才會運行。造成我的誤解。

今天做了一下測試,放個其它網站的a連結試試。
果不其然,一下子就換頁過去了。完全不需要等待ajax完成。

所以問題點並不是在於ajax的問題。而是在於ajax的請求,會造成同域名伺服頁面等待請求的情況。

基本上雖然你並非是正確的解答。但給了我靈感。就將解答給你了。

wingkawa iT邦新手 3 級 ‧ 2018-06-11 16:58:07 檢舉

這麼說來很久以前有被提醒過一個狀況,那時是用php測試的,詳細作法不記得了,大致上是這樣:

page1.php:

<?php
sleep(100);
echo 'Helllllllo Zzzz';

page2.php:

<?php
echo 'Hello Sleepy World!';

然後會很神奇的,因為page1還在跑,所以page2也跑不出來
記得是伺服器的設定上可以調,那時是用Apache,但現在也不是很確定是調http server還是哪裡的設定檔/images/emoticon/emoticon06.gif

如果我有回想起什麼再貼上來

是調整伺服器的做法沒錯。
只是這是幫客戶處理的。所以有將該問題跟客戶說明要去調整web server的設定。(所以我上面才會說無解)

不過因為大多數這個設定都是多工連線處理的。所以很難得會遇到這樣的問題。
我是因為客戶的要求,當時並未去想到這個問題。後來就想到了。
只是當時腦袋沒轉過來,一時之間誤會了ajax等待問題。
一直想說「不可能會這樣啊」

也搞不太明白為何客戶要做這樣的設定。(具了解好像是為了怕被攻擊還是安全性的的問題??)
反正我就不管那麼多了。至少我有証明非程式上的問題。

0

到ajax運行完成才可以切頁, 你的切頁是指啥?
/images/emoticon/emoticon10.gif

看更多先前的回應...收起先前的回應...

就是a連結換另一個頁面過去。上面已補充了。

最簡單的方式就是獨立寫一支ajax和html去測試,html上只放一個按鈕去觸發ajax和切頁的a標籤,這樣都不行的話,就是你的後端有問題,沒問題的話,就是你的js有問題~
/images/emoticon/emoticon28.gif

已測,已死。已確定。
確實需要等ajax回應全完全後。瀏覽器才會運行下一個命令。
可以從network發現到。其實轉頁命令是有出去的。只是他會等待前ajax送出去的頁面回應完後才會運行。

目前就是正在想另外一種方式。可以讓瀏覽器維持在callback的狀態下。
這樣就不需要等待回應完成。

問題是你的ajax回應為何那麼久吧,一般都是很快就回應,不會感覺到有延遲,程式效率問題~

fillano iT邦超人 1 級 ‧ 2018-06-08 16:32:05 檢舉

怪,我測了一下,在each跑完後直接下location.replace的話,這些async requests是會被取消的。

fillano iT邦超人 1 級 ‧ 2018-06-08 16:37:06 檢舉

我猜測你的狀況是:response很快,所以都會跑到callback,這樣需要等到callback跑完才有辦法進下一頁。可以取消的是request還沒完成的動作,不是已經開始執行的callback functions。

重覆...

@kksugsay 要說程式效率問題我無話可說,因為是做curl請求的因素。且一次是請求5~10個不同的地點。平均約要1~3秒的時間。
會用ajax就是因為會等待,所以才採用ajax後置處理。
要不然就可以直接載入了。
畢竟不是本機請求的因素。這是很無奈的問題。
或許你比較有辦法要求對方速度快一點吧。我是沒辦法。

@fillano
詳細原因可以看我的文章後續說明。
可以確定並非是ajax的js問題就是了。

這是經過多種測試後出來的結論。
只是對於我的問題還是無解了。可能得要用個套件器來處理了。
要不然就得更換請求的域名跟請求方式了。

方法多的是,而且寫程式沒有規劃,亂寫一通,才是最根本的原因,看你程式碼就知道了,後面問題只會更多,沒列為最佳解答,就不干偶事了~/images/emoticon/emoticon28.gif

我是搞不懂。console.log是還有哪邊叫做程式沒有規劃??
真不知道是你不懂這是一個測試輸出的東西簡易化出來的程式
還是你很想說你很行呢?

回答問題完全不知道人家的重點在哪。也不懂實際上人家在問的東西是什麼。
麻煩一下,想洗別人的臉,先洗好自已的臉。

看我的程式碼就知道~~~天啊。放個 console.log 是能看出什麼啊。
我還真不知道你有天眼通。所以你的意思測試不該用console.log來做測試。這樣就是沒有規劃,亂寫一通了喔。

真是再講廢話耶!!真不知道你程式是怎麼看的,怎麼分不清楚什麼是測試的,什麼是正統的呢??

你知道什麼是curl嘛??為何你會覺得可以用程式來去影響他人伺服器的速度??

「方法多的是,而且寫程式沒有規劃,亂寫一通,才是最根本的原因」
居然丟的出來!!不過放心啦,我不會叫你把方法寫出來的。因為你自已已經說了「沒列為最佳解答,就不干偶事了」
相信你也會拿這句話來當擋劍牌。我也沒什麼期望看你所謂有規劃的程式碼。(看不出問題本質的人,還能有什麼好的規劃?)

還覺得你可以拿最佳解答???

我告訴你,這個問題在某一個程式群組中,是大家都覺得奇怪的問題。
也很多人去寫的測試程式來証實。
經過所有人的研究,才証實了,這並非是ajax的問題。而只是單純伺服器請求方面的回應問題。只是ajax不小心被揹黑鍋了。

因為平常大家所在用的ajax,大多會在1秒內完成。
所以幾乎沒人會注意到這樣的問題。

在我沒碰上該問題之前,我也是認定ajax是不需要等待回應的。(實際上也是如此)
幾乎所有人都是一開始以為是在等待ajax回應完成。所以一直覺得奇特,且在思考上也感覺很不可思議。

一直到最後有人突破了盲點。會不會是,再等待換頁,而不是等待ajax?
這樣才做我如上的測試,這才了解了原因。並非是程式上的問題。

這樣才叫做研究,叫做討論。

看你上面的code就知道了,跟console.log無關,另外是因為什麼而等待,看network就知道了,這不需要猜半天,沒什麼行不行,實話實說罷了

那好吧,就你實話實說就好了。
能將註解掉的測試代碼當成一般規劃代碼。這我無話可說。
因為那本來就是沒規劃,單純做測試的代碼。它的確是沒任何規劃。

或許就你在測試時會再做好好的規劃程式。不會用一堆html來查看值。
看network的確就可以知道這點倒也沒錯。算是我的經驗不夠。沒辦法馬上意會到問題所在。

就先謝謝您的指教了。

說的是這段code的作法,跟什麼註解還是測試沒啥關係
/images/emoticon/emoticon10.gif

$(".money_btn").each(function(){
        var game = $(this).data('game') || '';
        var show_obj = $(this).parent().find(".money_lb").html('');
        ajax_get_money(game, show_obj);
  });
0
fillano
iT邦超人 1 級 ‧ 2018-06-07 15:18:02

你弄錯async的意思了。如果async:true,那$.ajax()不會等結果發生就會立刻返回,然後當request結束時才呼叫回呼函數。而同步的話就會等待到request結束才返回,所以會擋住你切換到下一頁。

...等一下,所以你的問題是給async:true他也會等待?那當我沒說。真抱歉。(有jquery的版本資訊嗎?在所有的瀏覽器都會發生嗎?)

他沒搞錯吧,一開始用沒設定的方式測試,有問題才加上那個屬性~ /images/emoticon/emoticon10.gif

jquery是用1.11版的。
那的確是因為試不出問題才將 async:true 放上去試看看的。

0
Homura
iT邦高手 1 級 ‧ 2018-06-07 17:19:06

把你的$(document).ready(function () {})拿掉試試看?

看更多先前的回應...收起先前的回應...

拿掉??
拿掉不就不用跑了??
因為沒東西給他跑啊。

Homura iT邦高手 1 級 ‧ 2018-06-08 10:41:45 檢舉

是說$(document).ready拿掉
裡面$(".money_btn").each()直接執行

我當然明白你在說什麼。只是我的js是開頭呼叫的。
不放$(document).ready。根本就沒辦法有元件存在。
自然就會產生瞬開的情況。(因為程式根本不會運行)

當然我也沒那麼鐵齒。有先將程式碼放入到footer後運行試試。
(也就是不利用ready或load等待載入完全的模式處理)
但基本上原則還是跟$(document).ready的使用一樣就是了。

Homura iT邦高手 1 級 ‧ 2018-06-08 15:35:44 檢舉

是唷
我也只是猜猜看而已0.0

0
優悠
iT邦新手 3 級 ‧ 2018-06-08 09:15:10

用監聽事件,來查查吧!

我要發表回答

立即登入回答