我如何确保此 ajax 调用仅在用户与其交互时发生，而不是在页面加载时发生？
How do I make sure this ajax call only happens when a user interacts with it, not on page load?
在我的 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" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "profiles"."id" ASC LIMIT [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Profile Load (54.2ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
User Load (8.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = ORDER BY "users"."id" ASC LIMIT [["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" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["LIMIT", 1]]
User Load (5.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
Rating Load (18.2ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["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 [["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
所以我需要做的就是：
- 如何确保
$.ajax 调用仅在用户与滑块交互时发生，不一定在第一页加载时发生。 注意 slider 需要在第一个页面加载时更新，因为它需要将 start 值设置为 _original_value，如您所见在 noUiSlider.create 通话中。
一旦我弄明白了，我相信初始页面加载时的大部分数据库调用应该会消失，我的页面加载时间应该会显着缩短。
也许使用其他事件，如滑动或更改：https://refreshless.com/nouislider/events-callbacks/
或者可能是您的创建代码触发了更新事件？
在我的 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" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "profiles"."id" ASC LIMIT [["slug", "rebecca-nitzsche-st-george-s-college"], ["LIMIT", 1]]
Profile Load (54.2ms) SELECT "profiles".* FROM "profiles" WHERE "profiles"."slug" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "profiles"."id" ASC LIMIT [["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" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
User Load (8.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = ORDER BY "users"."id" ASC LIMIT [["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" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["LIMIT", 1]]
Rating Load (5.4ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["LIMIT", 1]]
User Load (5.7ms) SELECT "users".* FROM "users" WHERE "users"."id" = ORDER BY "users"."id" ASC LIMIT [["id", 7], ["LIMIT", 1]]
Rating Load (18.2ms) SELECT "ratings".* FROM "ratings" WHERE "ratings"."user_id" = 7 AND "ratings"."profile_id" = 7 LIMIT [["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 [["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
所以我需要做的就是：
- 如何确保
$.ajax调用仅在用户与滑块交互时发生，不一定在第一页加载时发生。 注意slider需要在第一个页面加载时更新，因为它需要将start值设置为_original_value，如您所见在noUiSlider.create通话中。
一旦我弄明白了，我相信初始页面加载时的大部分数据库调用应该会消失，我的页面加载时间应该会显着缩短。
也许使用其他事件，如滑动或更改：https://refreshless.com/nouislider/events-callbacks/
或者可能是您的创建代码触发了更新事件？