Chrome DevTools 未打開時與 setTimeout 的行為不一致

Question

我的目的是創建一個基本的去抖動 function 來搜索員工。 我發現當 Chrome DevTools 打開時，我可以始終從服務器獲取搜索結果，但是當 Chrome DevTools 未打開時，很多時候服務器上搜索方法中設置的斷點永遠不會被命中。 似乎無論出於何種原因都沒有進行 AJAX 調用。

在codepen下面，不幸的是我沒有可以返回搜索結果的部分。

https://codepen.io/jgunawan-dc/pen/vYLZbEY

new Vue({
 el: '#app',
 vuetify: new Vuetify(),
 data: {
  searchInput: null,
  selectedEmployees: null,
  isSearchingEmployee: false,
  items: [],
 },
 methods: {
  searchEmployees: function (searchInput) {
    // cancel pending call
    clearTimeout(this._timerId);

    this.isSearchingEmployee = true;

    // delay new call 1 second
    this._timerId = setTimeout(() => {
      let _this = this,
        url = 'some_url' + '?phrase=' + searchInput;
      url = encodeURI(url);

      $.ajax({
        type: 'GET',
        url: url,         
        success: function (result) {                                              
          _this.items.splice(0);
          _this.items.push(...result);
        },
         complete: function (xhr) {
          _this.isSearchingEmployee = false;
        }
      });                    
    }, 1000);
  }
},
watch: {
  'searchInput': function (newVal) {
    this.searchEmployees(newVal);
   }
  }
})

Answer 1

GET 請求旨在被緩存。 這就是讓您的沖浪體驗更快的原因。 所以你的瀏覽器沒有訪問服務器，因為它有數據。

DevTools 有一個不緩存請求的選項。 您可能已啟用此功能，因此您總是看到對服務器的調用。

如果服務器上的數據是 static，那是一件好事，因為這對用戶來說會更快。 如果您不希望它們被緩存。 在服務器上設置正確的標頭，這樣您的請求就不會被緩存。 另一種選擇是將 JQuery Ajax 參數設置為不緩存。

$.ajax({
  type: 'GET',
  url: url,   
  cache: false,
  ...
})