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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
php include和require的区别深入解析
2013/06/17 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JS OffsetParent属性深入解析
2014/01/13 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
进一步了解Python中的XML 工具
2015/04/13 Python
python使用7z解压apk包的方法
2015/04/18 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
想学画画?python满足你!
2020/12/24 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
最新计算机专业自荐信
2013/10/16 职场文书
我的求职计划书
2014/01/10 职场文书
活动志愿者自荐信
2014/01/27 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
项目经理任命书内容
2014/06/06 职场文书
航空学院求职信
2014/06/11 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
考察邀请函范文
2015/01/31 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
严以用权学习心得体会
2016/01/12 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书