如何为Ruby on Rails中带remote:true的form_tag添加延迟？

当前你的搜索表单会在用户输入每一个字符时立刻发起请求，短时间内大量请求堆积会导致加载异常。解决这个问题的核心是实现防抖（Debounce）逻辑——让请求在用户停止输入一段时间后才触发，避免频繁发起请求。

原代码回顾 #

HTML.erb 代码

<%= form_tag search_by_name_contacts_path, remote: true, method:'get', class: 'w-100' do %>
    <div class=row>
        <div class="col-auto pr-0">
            <i class="fas fa-search"></i>
        </div>
        <div class=col>
            <input type="text" name="query" placeholder="Pesquisar" id="search-contact-query" autocomplete="off">
        </div>
    </div>
    <%= hidden_field_tag :target, params[:target] %>
    <%= hidden_field_tag :requester, params[:requester] %>
<% end %>

Controller 代码

def search_by_name
    @contacts = Contact.filter_by_modal(params, current_company, current_user)
  respond_to do |format|
    format.js
    format.json { render json: @contacts.to_json(methods: [:abbr_name]) }
  end
end

修复步骤 #

1. 调整表单的自动提交行为
   移除表单的 remote: true 属性，避免Rails自动监听输入并发起请求，改为手动通过JS控制请求时机。同时给表单添加ID，方便后续JS获取。

   修改后的HTML.erb：

   <%= form_tag search_by_name_contacts_path, method:'get', class: 'w-100', id: 'search-contact-form' do %>
       <div class=row>
           <div class="col-auto pr-0">
               <i class="fas fa-search"></i>
           </div>
           <div class=col>
               <input type="text" name="query" placeholder="Pesquisar" id="search-contact-query" autocomplete="off">
           </div>
       </div>
       <%= hidden_field_tag :target, params[:target] %>
       <%= hidden_field_tag :requester, params[:requester] %>
   <% end %>
   

2. 添加防抖逻辑的JavaScript代码
   在页面中添加以下JS（可放在ERB文件底部或单独的JS文件中），实现防抖功能：

   // 防抖函数：延迟执行目标函数，若延迟期间再次触发则重置延迟
   function debounce(func, delay) {
     let timeoutId;
     return function() {
       const context = this;
       const args = arguments;
       clearTimeout(timeoutId);
       timeoutId = setTimeout(() => func.apply(context, args), delay);
     };
   }
   
   // 获取搜索输入框和表单元素
   const searchInput = document.getElementById('search-contact-query');
   const searchForm = document.getElementById('search-contact-form');
   
   // 定义AJAX提交表单的逻辑，匹配原remote: true的行为
   function submitSearchForm() {
     Rails.ajax({
       url: searchForm.action,
       type: searchForm.method,
       data: new FormData(searchForm),
       success: function(response) {
         // 执行返回的JS响应，更新页面内容
         eval(response);
       }
     });
   }
   
   // 绑定防抖后的输入事件，设置300ms延迟（可根据需求调整）
   const debouncedSubmit = debounce(submitSearchForm, 300);
   searchInput.addEventListener('input', debouncedSubmit);
   

   若你不需要AJAX异步提交，也可以直接用表单原生提交：

   function submitSearchForm() {
     searchForm.submit();
   }
   

说明 #

• 防抖延迟时间（示例中为300ms）可根据实际场景调整，比如设置为500ms，给用户更充足的连续输入时间。
• 若坚持保留remote: true，需要在输入事件中添加event.preventDefault()阻止默认自动提交，不过手动控制AJAX的方式灵活性更高。

内容的提问来源于stack exchange，提问作者Wallace Nascimento