首頁>Web>source

我正在使用ajax函式更新儲存在使用者元欄位中的陣列。

添加到陣列中的值来自標記內的資料屬性,這些標記也作用於觸發ajax呼叫的觸發器。

虽然该函式在95%的時間內都能正常工作,但是否儲存该值可能会有點麻煩.我怀疑這是因為使用者可以過快地觸發這些ajax呼叫,而没有给原始函式呼叫足够的時間来儲存和更新meta欄位。

在再次允许该功能再次執行之前,確保ajax觸發的更新元欄位值的功能已经完成的最佳方法是什麼?

希望這很有道理-不用說,如果您需要更多資訊,請告诉我。

提前谢谢!

Sample HTML

<div id="rjb_slots" class="slots">
  <h5>Mon, 24th Aug 2020</h5>
  <div class="slot">
    <span class="time">10:30</span>
    <a class="book" data-timestamp="1598265000" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">11:00</span>
    <a class="booked" data-timestamp="1598266800" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">11:30</span>
    <a class="booked" data-timestamp="1598268600" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">12:00</span>
    <a class="book" data-timestamp="1598270400" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">12:30</span>
    <a class="booked" data-timestamp="1598272200" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">13:00</span>
    <a class="book" data-timestamp="1598274000" href="#"></a>
  </div>
  <div class="slot">
    <span class="time">19:30</span>
    <a class="book" data-timestamp="1598297400" href="#"></a>
  </div>
</div>

Ajax .js

$('.slot').on('click', 'a.book', function(e) {
  e.preventDefault();
  var user   = $('#rjb_day').attr( 'data-user' );
  var stamp  = $(this).attr( 'data-timestamp' );
  
  // console.log(bookCap);
  
  $(this).removeClass('book').addClass('booked');
  $.ajax({
    type: 'POST',
    url: ajax_object.ajaxurl,
    data: {
        action: 'rjb_make_diary_slots',
        user: user,
        stamp: stamp
    },
    success: function(data) {
      // This outputs the result of the ajax request
      console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
  });
    
});

Function that updates the user metafield

add_action( 'wp_ajax_rjb_make_diary_slots', 'rjb_make_diary_slots' );
function rjb_make_diary_slots() {
  $user   = $_POST['user'];
  $stamp  = array(
              array( 
                'rjb_cal_day'           => strtotime('today', $_POST['stamp']),
                'rjb_cal_when'          => $_POST['stamp'],
                'rjb_cal_position_id'   => '',
                'rjb_cal_candidate_id'  => ''
              )
            );
  $calendar   = get_user_meta( $user, 'rjb_cal', true);
  $stamps     = !empty($calendar) ? $calendar : array();
  $new_stamp  = array_merge($stamps, $stamp);
  usort($new_stamp, function($a, $b) {
    return $a['rjb_cal_when'] <=> $b['rjb_cal_when'];
  });
  update_user_meta( $user, 'rjb_cal', $new_stamp);
  $log = print_r($stamp);
  wp_die($log);
}

Example of a value stored in the rjb_cal 使用者元欄位

array (
  [0] => array (
    [rjb_cal_day] => 1598227200
    [rjb_cal_when] => 1598266800
    [rjb_cal_position_id] => 
    [rjb_cal_candidate_id] => 
  )
  [1] => array (
    [rjb_cal_day] => 1598227200
    [rjb_cal_when] => 1598268600
    [rjb_cal_position_id] => 
    [rjb_cal_candidate_id] => 
  )
  [2] => array (
    [rjb_cal_day] => 1598227200
    [rjb_cal_when] => 1598272200
    [rjb_cal_position_id] => 
    [rjb_cal_candidate_id] => 
  )
)
最新回復
  • 9月前
    1 #

    我通常使用CSS類来控製影响特定元素的AJAX請求.這樣,您可以防止對该元素进行不必要的AJAX請求,而其他AJAX請求可能仍被觸發,並已繫結到其他元素。

    $('.slot').on('click', 'a.book', function(e) {
        e.preventDefault();
        // Check if doing ajax
        if($(this).hasClass("doing-ajax")) return false;
        $(this).addClass("doing-ajax");
        var user   = $('#rjb_day').attr( 'data-user' );
        var stamp  = $(this).attr( 'data-timestamp' );
    
        // console.log(bookCap);
        $(this).removeClass('book').addClass('booked');
        $.ajax({
            context: $(this),
            type: 'POST',
            url: ajax_object.ajaxurl,
            data: {
                action: 'rjb_make_diary_slots',
                user: user,
                stamp: stamp
            },
            success: function(data) {
               // This outputs the result of the ajax request
               console.log(data);
               // Remove "doing-ajax" class
               $(this).removeClass("doing-ajax");
            },
            error: function(errorThrown){
                console.log(errorThrown);
                // Remove "doing-ajax" class
               $(this).removeClass("doing-ajax");
            }
        });
    });
    

    別忘了添加 context 屬性,就像我在上面的示例中所做的那樣。

  • 9月前
    2 #

    您可以使用两種方法来防止使用者在完全完成ajax之前單击您的elem。 1.顯示載入程式並阻止该元素,以便在ajax完成之前没有人可以執行它。 2.使用全域性變數isAjaxProcess = false; 現在在您的代碼中建立一个條件塊 If(isAjaxProcess === false){ isAjaxProcess = true: 您的ajax代碼在這裏。 並在ajax成功塊中將isAjaxProcess設置為false。 }

  • wordpress:重定向到仅登錄使用者的頁面
  • drupal:為什麼会话表中存在uid 0的條目?