我如何确保这个ajax调用只在用户与它交互时发生,而不是在页面加载时发生

How do I make sure this ajax call only happens when a user interacts with it, not on page load?

本文关键字:交互 加载 用户 确保 何确保 调用 ajax      更新时间:2023-09-26

在我的app/assets/javascripts/profiles.js中,我有以下内容:

$(document).on('turbolinks:load', function() {    
  var sliders = $('.slider');
  var buttons = $('.slider-step-value');
  for ( var i = 0; i < sliders.length; i++ ) {
    var button = $(sliders[i]).prev('p').find('button')[0];
    var _slider_type = sliders[i].id.split('-')[1];
    var _original_value = $('button#' + button.id).data(_slider_type + "-value");
    noUiSlider.create(sliders[i], {
      start: _original_value,
      step: 1,
      behaviour: 'tap',
      connect: [true, false],
      range: {
        'min':  1,
        'max':  10
      }
    });
    attachEvent(sliders[i], button);
  }
  function attachEvent(slider,button){
    slider.noUiSlider.on('update', function( values, handle ) {
      button.innerText = parseInt(values[handle]);
      var _profile_id = button.id.split('-').slice(4).join('-');
      var _rating_type = button.id.split('-')[3]
      var url = "/profiles/" + _profile_id + "/" + _rating_type + "_rating/?" + _rating_type + "=" + button.innerText
      $.ajax({
        type: "PATCH",
        url: url,
        success: function(){
          // console.log(_profile_id + "'s " + _rating_type + " was successfully updated.");
        },
        error: function(){
          // console.log(_profile_id + "'s " + _rating_type + " was NOT successfully updated.");
        }
      })
    });
  }
});

当我重新加载任何Profile#Show页面时会发生什么,这是日志的样子:

Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/speed_rating/?speed=7" for ::1 at 2016-10-31 14:51:56 -0500
Processing by ProfilesController#speed_rating as */*
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/tackling_rating/?tackling=9" for ::1 at 2016-10-31 14:51:56 -0500
Processing by ProfilesController#tackling_rating as */*
  Parameters: {"tackling"=>"9", "id"=>"rebecca-nitzsche-st-george-s-college"}
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/passing_rating/?passing=7" for ::1 at 2016-10-31 14:51:56 -0500
Started PATCH "/profiles/rebecca-nitzsche-st-george-s-college/dribbling_rating/?dribbling=4" for ::1 at 2016-10-31 14:51:56 -0500
  Parameters: {"speed"=>"7", "id"=>"rebecca-nitzsche-st-george-s-college"}
Processing by ProfilesController#passing_rating as */*
  Parameters: {"passing"=>"7", "id"=>"rebecca-nitzsche-st-george-s-college"}
  Profile Load (5.6ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2  [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Processing by ProfilesController#dribbling_rating as */*
  Parameters: {"dribbling"=>"4", "id"=>"rebecca-nitzsche-st-george-s-college"}
  Profile Load (53.0ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2  [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
  Profile Load (54.2ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2  [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
  Grade Load (9.0ms)  SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
  Profile Load (5.4ms)  SELECT  "profiles".* FROM "profiles" WHERE "profiles"."slug" = $1 ORDER BY "profiles"."id" ASC LIMIT $2  [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
  Grade Load (5.9ms)  SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
  Grade Load (13.2ms)  SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
  HABTM_Positions Load (14.7ms)  SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
  Grade Load (13.5ms)  SELECT "grades".* FROM "grades" WHERE "grades"."profile_id" = 7
  HABTM_Positions Load (12.2ms)  SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
  HABTM_Positions Load (147.3ms)  SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
  Position Load (4.3ms)  SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
  Position Load (6.2ms)  SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
  HABTM_Positions Load (14.8ms)  SELECT "positions_profiles".* FROM "positions_profiles" WHERE "positions_profiles"."profile_id" = 7
  Position Load (9.1ms)  SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
  Achievement Load (3.5ms)  SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
  Achievement Load (89.6ms)  SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
  Position Load (83.1ms)  SELECT "positions".* FROM "positions" WHERE "positions"."id" = 7
  Achievement Load (6.0ms)  SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
  Video Load (5.0ms)  SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
  Video Load (10.8ms)  SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
  Achievement Load (12.9ms)  SELECT "achievements".* FROM "achievements" WHERE "achievements"."profile_id" = 7
  Video Load (98.2ms)  SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
  Transcript Load (10.2ms)  SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
  Transcript Load (2.7ms)  SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
  Video Load (6.6ms)  SELECT "videos".* FROM "videos" WHERE "videos"."profile_id" = 7
  Transcript Load (5.7ms)  SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
  User Load (4.9ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 7], ["LIMIT", 1]]
  User Load (8.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 7], ["LIMIT", 1]]
  Transcript Load (35.1ms)  SELECT "transcripts".* FROM "transcripts" WHERE "transcripts"."profile_id" = 7
  User Load (35.2ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 7], ["LIMIT", 1]]
  Rating Load (5.4ms)  SELECT  "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1  [["LIMIT", 1]]
  Rating Load (5.4ms)  SELECT  "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1  [["LIMIT", 1]]
  User Load (5.7ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 7], ["LIMIT", 1]]
  Rating Load (18.2ms)  SELECT  "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1  [["LIMIT", 1]]
   (20.2ms)  BEGIN
   (4.4ms)  BEGIN
  Rating Load (10.4ms)  SELECT  "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT $1  [["LIMIT", 1]]
   (10.9ms)  BEGIN
   (7.1ms)  COMMIT
   (4.9ms)  BEGIN
   (45.6ms)  COMMIT
   (42.7ms)  COMMIT
   (379.0ms)  COMMIT
No template found for ProfilesController#tackling_rating, rendering head :no_content
No template found for ProfilesController#speed_rating, rendering head :no_content
No template found for ProfilesController#passing_rating, rendering head :no_content
Completed 204 No Content in 2224ms (ActiveRecord: 90.0ms)

Completed 204 No Content in 2312ms (ActiveRecord: 440.7ms)

No template found for ProfilesController#dribbling_rating, rendering head :no_content
Completed 204 No Content in 2311ms (ActiveRecord: 244.2ms)

Completed 204 No Content in 2271ms (ActiveRecord: 571.3ms)

我相信这些调用的大部分来自我的set_profile方法:

before_action :set_profile, only: [:show, :edit, :update, :destroy, :invite_user, :speed_rating, :tackling_rating, :dribbling_rating, :passing_rating, :profiles]
def set_profile
  @profile = Profile.includes(:grades, :positions, :achievements, :videos, :transcripts).friendly.find(params[:id])
end

所以我需要做的就是:

  1. 我如何确保$.ajax调用,只发生在用户与滑块交互时,不一定在第一个页面加载。注意 slider需要在第一页加载时更新,因为它需要将start值设置为_original_value,正如您在noUiSlider.create调用中看到的那样。

一旦我可以弄清楚,我相信在初始页面加载时的大多数DB调用应该会消失,我的页面加载时间应该会显着改善。

可以使用其他事件,如slide或change: https://refreshless.com/nouislider/events-callbacks/

或者是您的创建代码正在触发更新事件?