iT邦幫忙

2

jquery 的事件處理問題

我自已寫了一個日期處理的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?

1
fysh711426
iT邦研究生 5 級 ‧ 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();
        }
    });
});
Brandon iT邦新手 4 級 ‧ 2017-11-06 08:35:26 檢舉

感謝,it works for me!

fysh711426 iT邦研究生 5 級 ‧ 2017-11-06 08:42:09 檢舉

很高興能幫助到您!!

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

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

2
Rach
iT邦新手 5 級 ‧ 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();
}

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

wilson1966 iT邦研究生 5 級 ‧ 2017-11-28 11:07:34 檢舉

/images/emoticon/emoticon12.gif讚,居然還有這一招。

我要發表回答

立即登入回答