<!--模拟百度搜索输入框效果,在每次输入之后会有不同的搜索信息返回-->
<!--html结构-->
<body>
<input type="text">
</body>
// JavaScript代码
let oInput = document.querySelector("input");
oInput.oninput = function () {
console.log(this.value);
console.log("发送请求");
}
// 通过这种方式虽然能满足基本功能效果,但是在输入框每次输入的数据改变时,就会发送请求,那么这样容易造成服务器压力
<!--html结构-->
<body>
<input type="text">
</body>
let oInput = document.querySelector("input");
let timerID = null;
oInput.oninput = function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(() => {
console.log(this.value);
console.log("发送请求");
}, 1000);
}
/*
代码讲解:
1.在高频函数外部设置timerID定时器标志变量,在首次触发高频函数时,判断timerID定时器是否存在,不存在则开启定时器,定时器1000ms后发送请求。
2.如果在1000ms内再次触发高频函数时,判断timerID定时器是否存在,存在先关闭timerID定时器,在开始timerID定时器,如果循环重复。
3.如果在1000ms内没有触发高频函数,那么则成功“发送请求”
通过函数防抖就能解决上述问题,在1秒内不间断输入,那么定时器处于不断的开启关闭状态,时间没超过一秒请求就不会发送
*/
/*
初步封装:
只要调用antiShake函数,那么就会返回一个防抖函数
*/
function antiShake() {
var timerID = null;
return function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
console.log("发送请求");
}, 500);
}
}
// 给antiShake函数添加回调函数形参和时间形参
function antiShake(fn, delay) {
var timerID = null;
return function () {
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn();
}, delay || 500);
}
}
// 改变this指向和传递事件对象
function antiShake(fn, delay) {
var timerID = null;
return function () {
var self = this;
var args = arguments;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn.apply(self, args);
}, delay || 500);
}
}
<!--html结构-->
<input type="text">
// antiShake(参数1, 参数2);
// 参数1: 回调函数
// 参数2: 延迟时间,不传递默认为500毫秒
let oInput = document.querySelector("input");
oInput.oninput = antiShake(send);
function send(event) {
console.log("发送请求");
console.log(this);
console.log(event);
}
function antiShake(fn, delay) {
var timerID = null;
return function () {
var self = this;
var args = arguments;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
fn.apply(self, args);
}, delay || 500);
}
}
<!--实现效果:使一个div元素的宽高在浏览器窗口大小改变时,永远等于可视区域宽高的一半-->
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->
<body>
<div></div>
</body>
// 调用该函数就能使得div元素宽高保持与屏幕可是区域的宽高的一半
function setElement() {
var pageX = window.innerWidth;
var pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
window.onresize = function () {
setElement();
console.log("发生变化了");
}
// 此方法虽然能实现,但是在浏览窗口大小发生改变时,setElement方法被高频率的多次触发
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->?
<body>
<div></div>
</body>
function setElement() {
var pageX = window.innerWidth;
var pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
let oDiv = document.querySelector("div");
setElement();
var timerID = null;
var flag = true;
window.onresize = function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
setElement();
console.log("我被触发了");
}, 500);
}
/*
代码讲解:
1.在高频函数外部设置timerID定时器标志变量,设置标志符号flag默认取值为true。如果flag为true才执行后面的代码,如果flag为false则不执行后面的代码。
2.当高频函数首次触发时,先让flag取反,再进行timerID判断,如果timerID为null,则开启timerID定时器,定时器在500ms之后被执行,“发送请求”,并flag取反。
3.只要定时没有成功执行完成,flag永远为false,那么定时器就不会不断的重启和关闭,这样就能保证,即使高频函数在不断触发,也能保证业务代码在500ms间断触发
代码含义就是只有if条件语句的条件判断为假才会执行定时器的代码,如果为真则永远不会执行定时器代码,那么整段代码的含义就会变成没500毫秒执行一次业务逻辑代码
*/
// 只要调用throttling函数,那么就会返回一个防抖函数
function throttling() {
let timerID = null;
let flag = true;
return function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
setElement();
}, 500);
}
}
// 设置回调函数形参和时间形参
function throttling(fn, delay) {
let timerID = null;
let flag = true;
return function () {
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn();
}, delay || 500);
}
}
// 改变this指向和传递事件对象
function throttling(fn, delay) {
let timerID = null;
let flag = true;
return function () {
let self = this;
let args = arguments;
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 500);
}
}
<!--css样式-->
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<!--html-->?
<body>
<div></div>
</body>
// throttling(参数1, 参数2);
// 参数1: 函数
// 参数2: 延迟时间,不传递默认为1000毫秒
let oDiv = document.querySelector("div");
function setElement() {
let pageX = window.innerWidth;
let pageY = window.innerHeight;
oDiv.style.width = pageX / 2 +"px";
oDiv.style.height = pageY / 2 +"px";
}
setElement();
window.onresize = throttling(setElement, 400);
function throttling(fn, delay) {
var timerID = null;
var flag = true;
return function () {
var self = this;
var args = arguments;
if (!flag) {
return;
}
flag = false;
timerID && clearTimeout(timerID);
timerID = setTimeout(function () {
flag = true;
fn.apply(self, args);
}, delay || 500);
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。