我如何确保这个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" = $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
所以我需要做的就是:
- 我如何确保
$.ajax
调用,只发生在用户与滑块交互时,不一定在第一个页面加载。注意slider
需要在第一页加载时更新,因为它需要将start
值设置为_original_value
,正如您在noUiSlider.create
调用中看到的那样。
一旦我可以弄清楚,我相信在初始页面加载时的大多数DB调用应该会消失,我的页面加载时间应该会显着改善。
可以使用其他事件,如slide或change: https://refreshless.com/nouislider/events-callbacks/
或者是您的创建代码正在触发更新事件?
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 使用 CasperJS 时,是否可以在执行任何内联或外部 Javascript 之前与加载页面的 DOM 进行交互
- HTML,JS:加载音频是否需要在移动浏览器上进行用户交互
- 无法与使用 jQuery 的 jQuery 加载按钮交互
- 开放层 3:加载矢量特征上的交互
- 交互加载另一个页面到DIV
- 如何在jquery中显示加载器时阻止用户与底层用户界面的交互
- 我如何确保这个ajax调用只在用户与它交互时发生,而不是在页面加载时发生
- 如何检测或注册自定义元素加载并准备与之交互的回调
- 如何在加载插件时与TinyMCE插件进行交互
- 使用require只在用户交互时加载jquery插件
- 如何在加载dom后与添加的id交互
- 可以't在加载选项卡后与jQuery选项卡内容交互