JS this关键字在ajax中使用出现问题解决方案


Posted in Javascript onJuly 17, 2020

背景:

在一次web网站开发维护中,使用手机验证码进行登录。再点击获取手机验证码时,验证码按钮并没有置灰,同时也没有出现倒数读秒的效果。

设置按钮倒数60秒前端代码:

var clock = '';
  var nums = 60;
  var btn;
  function sendCode(thisBtn) {
    btn = thisBtn;
    btn.disabled = true; //将按钮置为不可点击
    btn.value = nums + '秒重新获取';
    btn.className = 'regGetcodeBtn1';
    if (clickNumber == 0) {
      clock = setInterval(doLoop, 1000); //一秒执行一次
    }
  }
function doLoop() {
    nums--;
    if (nums > 0) {
      btn.value = nums + '秒后重新获取';
      clickNumber = 1;
    } else {
      clearInterval(clock); //清除js定时器
      btn.disabled = false;
      btn.value = '获取验证码';
      btn.className = 'regGetcodeBtn1 color';
      nums = 60; //重置时间
      clickNumber = 0;
    }
  }

在向后端请求获取短信验证码成功之后,调用sendCode()函数,实现如下效果:

JS this关键字在ajax中使用出现问题解决方案

但是在ajax请求,调用时,实际上该效果并没有出现,代码如下:

$.ajax({
      url: servletUrl,
      type: "post",
      dataType: 'JSON',
      data: { name: name, securityCode: txtsecurityCode1/* strTelphone: strCodeTelphone, securityCode: txtsecurityCode1*/},
      success: function (result) {
        //已经存在该名字提示用户
        if (result.status == false) {
          console.log("传入ajax中的this对象:" + this.location);
          $('#hdVerifCode').val(0);
          nums = 0;
          layer.alert(result.msg, { icon: 2 });
          layer.close(loadingindex);
          // 刷新验证码
          $('#secImg').click();
        } else {
          $('#hdVerifCode').val(1);
          sendCode(this);
 
        }
      },

 这个时候,我i传入一个this,原本意是代替触发的btn对象,但是实际上,在传入sendCode中时,却并不是我所想的。查阅资料,学习了一下js中this这个关键字,好吧,在ajax的success中,this代替了传入到看ajax的bbjcet对象,而不是触发按钮事件的btn了。所以,并没有改变按钮对象的状态。

解决办法:

A。在调用ajax方法之前,定义一个对象,接受this指代的对象。var that=this;然后在sendCode(that)传入包装好的this对象即可。

B。使用bind(this)关键字,绑定当前的this的事件对象。

总结 this关键字:

1。全局作用域和普通函数中,指向全局对象window;

console.log(this) //window
 
//function声明函数
function bar () {console.log(this)}
bar() //window
 
//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window
 
//自执行函数
(function () {console.log(this)})(); //window

2。方法调用中,谁调用方法,this指向谁

//对象方法调用
var person = {
 run: function () {console.log(this)}
}
person.run() // person

//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
 console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
 console.log(this) //btn
})//jqery中的ajax$.ajax(object)在ajax的succes中,this指向了传入ajax的对象objsuccess:function(){
      $(this).prevAll('p').css("text-decoration","line-through");


}.bind(this)//使用bind(this)绑定当前this事件

3.在构造函数和构造函数原型中,this指向构造函数的实例。

//不使用new指向window
function Person(name) {
 console.log(this) // window
 this.name = name;
}
Person('inwe')
//使用new
var people = new Person('iwen')
function Person(name) {
 this.name = name
 console.log(this) //people
 self = this
}
console.log(self === people) //true
//这里new改变了this指向,将this由window指向Person的实例对象people

4. 箭头函数中指向外层作用域的 this

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javascript 面向对象思想 附源码
Jul 07 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
JS事件绑定的常用方式实例总结
Mar 02 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 #Javascript
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 #Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 #Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 #Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 #Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 #Javascript
简单了解常用的JavaScript 库
Jul 16 #Javascript
You might like
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
Yii配置文件用法详解
2014/12/04 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
必须收藏的23个php实用代码片段
2016/02/02 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[01:32]2016国际邀请赛中国区预选赛CDEC战队教练采访
2016/06/26 DOTA
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Python检测网站链接是否已存在
2016/04/07 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
解决Mac下使用python的坑
2019/08/13 Python
python爬虫容易学吗
2020/06/02 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
三好学生自我鉴定
2013/12/17 职场文书
年会邀请函范文
2015/01/30 职场文书
普宁寺导游词
2015/02/04 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
sql字段解析器的实现示例
2021/06/23 SQL Server