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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
Feb 04 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
js数组的操作指南
Dec 28 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
Vue源码探究之状态初始化
Nov 14 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
smarty缓存用法分析
2014/12/16 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
Element Input组件分析小结
2018/10/11 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python温度转换实例分析
2018/01/17 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
Shell如何接收变量输入
2016/08/06 面试题
初中三好学生事迹材料
2014/01/13 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年施工员工作总结
2014/11/18 职场文书
职称评定个人总结
2015/03/05 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js