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 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery 联动日历实现代码
May 31 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
js动态创建标签示例代码
Jun 09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
vue路由教程之静态路由
Sep 03 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
javascript的内存管理详解
2013/08/07 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
重命名批处理python脚本
2013/04/05 Python
Python pass 语句使用示例
2014/03/11 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python yield关键词案例测试
2019/10/15 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
2019/01/16 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
一些Solaris面试题
2013/03/22 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
消防安全管理制度
2014/02/01 职场文书
三八妇女节活动总结
2014/05/04 职场文书
伦敦奥运会口号
2014/06/13 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
什么是css原子化,有什么用?
2022/04/24 HTML / CSS
Promise静态四兄弟实现示例详解
2022/07/07 Javascript
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技