jquery 的事件處理問題

asp.net c# jquery event

Brandon 2017-11-03 23:13:49 ‧ 7960 瀏覽

我自已寫了一個日期處理的function(ParseGenericDate, 這個function背端是ajax)，只要把text加個ParseGenericDate的class，就可使用到此function

razor 語法

@Html.EditorFor(model => model.START_DATE, new { htmlAttributes = new { @class = "form-control ParseGenericDate" } })``

jquery

$('.ParseGenericDate').change(function () {
    ParseGenericDate(this);
});

現在我想要某個欄位(ex. START_DATE)，在原本的ParseGenericDate之後，還要多做其他的事

$('#START_DATE').change(function () {
    something_else();
});

但是我發現，jquery雖然是先執行 ParseGenericDate，再執行 something_else,但由於ParseGenericDate是ajax，所以其實ParseGenericDate還沒執行完，something_else就開始做了.

我要怎麼做，可以告訴jquery，要等原本的 ajax 執行完後，再執行 someting_else?

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

小碼農米爾

iT邦高手 1 級 ‧ 2017-11-04 09:39:33

最佳解答

ParseGenericDate 函數加上 callback 參數，在 ajax 回來後呼叫。

function ParseGenericDate(input, callback) {
    $.ajax({
    url: 'xxx',
    success: function(response) {
        callback();
    }
  });
}

外面再判斷是不是 START_DATE 決定要不要執行 something_else()

$('.ParseGenericDate').change(function () {
    var _this = this;
    ParseGenericDate(this, function(){
        if ($(_this).is("#START_DATE")) {
            something_else();
        }
    });
});

回應 3
分享
檢舉

Brandon iT邦新手 4 級 ‧ 2017-11-06 08:35:26 檢舉

感謝，it works for me!

小碼農米爾 iT邦高手 1 級 ‧ 2017-11-06 08:42:09 檢舉

很高興能幫助到您!!

Rach iT邦新手 4 級 ‧ 2017-11-07 14:20:53 檢舉

直接在$.ajax的config中，將async設成true，就會是同步的韓式了，不用特地寫一個callback。

登入發表回應

froce

iT邦大師 1 級 ‧ 2017-11-04 10:18:40

http://eddychang.me/blog/javascript/56-jquery-promise.html

回應
分享
檢舉

登入發表回應

Rach

iT邦新手 4 級 ‧ 2017-11-07 14:18:48

嗨樓主，不知道現在回復會不會太晚，如果只是為了ajax才使用jquery，不如用現在native javascript，使用上更方便！

let GET_BY_FEETCHHH = async function(){
  let result =  await fetch('url',{method:'GET'})
}

這樣可以先抓到第一層的raw data，像是header或是status，再來要將body的streaming解出來

只需要在result下面加入一行程式碼：

let GET_BY_FEETCHHH = async function () {
  let result = await fetch('url', { method: 'GET' });
  let data = result.json();
  console.log(data);
  // 這裡會執行完才callback
  return;
}

你所接到的檔案就會是在data中了，而且有個好處是，假如你今天要完成十個同步的ajax，你得寫十個callback，馬上進入callback hell，讓你瞧瞧所謂的波動拳地獄是什麼。

$.ajax({
    url: 'url1',
    success(response) {
      $.ajax({
          url: 'url2',
          success(response) {
              // 繼續剩下八個的ajax
          }
       });
    }
  });

就算你把每個都寫成一包callback，也很麻煩，維護與閱讀謝更是差，不如用這個原生fetch的方式，程式碼更是乾淨。

let GET_BY_FEETCHHH = async function () {
  let result1 = await fetch('url1', { method: 'GET' });
  let data1 = result.json();
  let result2 = await fetch('url2', { method: 'GET' });
  let data2 = result.json();
}

await與async是javascript中promise的語法糖，可以多加利用，對於程式碼的乾淨度會提升很多。