java接口防抖_防抖函数丶Java教程网-IT开发者们的技术天堂

1.使用场景：是在写keyup事件的时候，每次触发，都会请求后台接口，为了避免，每次请求，键盘弹起之后，隔上一段时间再去请求，所以用防抖函数

2.概念：

(1)什么是防抖：多次事件触发后、事件处理函数只执行一次，并且是在触发操作结束时执行。

(2)原理：延时操作处理函数、若设定的延时到来之前、再次触发函数、则清除上一次的延时操作定时器、重新定时

3.使用：

原先代码这样写的：

$("#key").on("keyup",keyupfn());

function keyupfn(){

var timer=null;

return function (){

clearTimeout(timer);

timer=setTimeout(function(){

var Val=$("#key").val();

$.ajax({

type: "post",

url: "",

data: {name:Val},

dataType: "json",

success: function(res) {

// 请求成功

}

});

},800);

}

使用封装后的：

注：第一个this，只是在刚开始，keyup事件，监听的时候，被调用了，之后，每次触发keyup事件，都是调用的debounce函数return出来的函数

关于this的指向：①谁调用函数，this就指向谁；②debounce这个外层函数与里面return出来的函数的调用者，是没有关系的；③debounce是window调用的，返回的函数是触发keyup调用的，是keyup事件触发了返回的函数，而不是debounce方法

function debounce(method,delay) {

let timer = null;

console.log("window", this) //1、 debounce是window调用的

return function () {

console.log("keyup事件调用的11111", this) // 2、this指向$("#key)

let self = this,

args = arguments;

timer && clearTimeout(timer);

timer = setTimeout(function () {

method.apply(self,args);

},delay);

}

$("#key").on("keyup",debounce(function () {

var Val=$("#key").val();

console.log("keyup事件调用的222222", this) // 3、 this指向$("#key)

$.ajax({

type: "post",

url: "",

data: {name:Val},

dataType: "json",

success: function(res) {

}

});

},1000)

);

java接口防抖_防抖函数丶Java教程网-IT开发者们的技术天堂相关推荐

java 箭头函数_箭头函数丶Java教程网-IT开发者们的技术天堂
基本用法在ES6中允许使用 => 来定义函数,如下: var f = a => a; console.log(f(1)); //1 就等同于 var f = function(a){ r ...
java 淡化图片阴影_图像去阴影丶Java教程网-IT开发者们的技术天堂
武汉大学提出ARGAN:注意力循环生成对抗模型用于检测.去除图像阴影 | ICCV 2019 https://blog.csdn.net/weixin_42137700/article/details ...
java线性渐变_线性渐变丶Java教程网-IT开发者们的技术天堂
渐变是由两种或多种颜色之间的渐进过渡组成,它是一种特殊的图像类型,分为线性渐变和径向渐变,这两类渐变还会细分为单次和重复两种.渐变图像与传统图像相比,它的优势包括占用更少的字节,避免额外的服务器请求, ...
java 淘口令_淘口令解析丶Java教程网-IT开发者们的技术天堂
淘口令解析通过程序解析淘口令,无需联盟开发者权限,只需几行代码就可实现自动识别淘口令: def query_password(sign_server, share_password): data = ...
java闪屏_闪屏页设置丶Java教程网-IT开发者们的技术天堂
相信每个app都需要一个闪屏页就是一个开始页面对于新手来说可能就直接一个activity 弄个背景图片 ,细心地同学也许会发现每次启动应用程序的时候一开始显示的不是那个设置的背景图片 ...
java发言_一次发言稿丶Java教程网-IT开发者们的技术天堂
亲爱的小朋友们,尊敬的各位领导.老师.家长朋友: 大家上午好! 我是刘文文的妈妈,非常荣幸能作为家长代表在这里表达我此时此刻的心情和感慨.首先,请允许我代表全体家长向所有的教职员工说一声:" ...
不同组合方式有四种纸币java_拼凑钱币丶Java教程网-IT开发者们的技术天堂
[问题]给你六种面额 1.5.10.20.50.100 元的纸币,假设每种币值的数量都足够多,编写程序求组成N元(N为0~10000的非负整数)的不同组合的个数. 输入描述: 输入包括一个整数n(1 ...
ejs java_ejs教程丶Java教程网-IT开发者们的技术天堂
ejs教程一.什么是EJS EJS是一个JavaScript模板库,用来从JSON数据中生成HTML字符串. 二.为什么要使用EJS 与最初的JavaScript相比较,一些不太了解你的代码的人可以 ...
java父原型,对象及原型丶Java教程网-IT开发者们的技术天堂
目录创建对象字面量创建对象 new Object() 创建对象获取.设置对象属性 obj.key 获取/设置obj的key属性的值value obj['key'] 获取/设置obj的key属性 ...

java接口防抖_防抖函数丶Java教程网-IT开发者们的技术天堂

java接口防抖_防抖函数丶Java教程网-IT开发者们的技术天堂相关推荐

最新文章

热门文章