/*
以下的做法：缺点是比较消耗性能，因为当在滚动的时候，浏览器会无时不刻地在计算判断是否滚动到底部的逻辑，
而在实际的场景中是不需要这么做的，在实际场景中可能是这样的：在滚动过程中，每隔一段时间在去计算这个判断逻辑。
*/
// $(window).on('scroll',()=>{
// //判断是否滚动到底部的逻辑
// let pageHeight = $('body').height(),
// scrollTop = $(window).scrollTop(),
// winHeight = $(window).height(),
// thresilod = pageHeight - scrollTop - winHeight;
// if(thresilod >-100 && thresilod <= 20){
// //在这个范围会不断打印出end
// console.log('end')
// }
// })
/*函数节流(throttle) 写法
减少请求的次数，已达到缓解服务器的压力
*/
function throttle(fn,interval = 300){
let canRun = true;
return function(){
if(!canRun) return;
canRun = false;
setTimeout(()=>{
fn.apply(this,arguments);
canRun = true;
},interval)
}
}
$(window).on('scroll',throttle(()=>{
//判断是否滚动到底部的逻辑
let pageHeight = $('body').height(),
scrollTop = $(window).scrollTop(),
winHeight = $(window).height(),
thresilod = pageHeight - scrollTop - winHeight;
if(thresilod >-100 && thresilod <= 20){
//在这个范围会不断打印出end
console.log('end');
}
}))
/*
如今很多网站为了提高用户体验，不会在输入框失去焦点的时候再去判断用户名是否被占用
而是在输入的时候就在判断这个用户名是否已被注册：
以下这个在每次输入的时候就会请求一遍，造成多次请求
*/
// $('input.user-name').on('input',()=>{
// $.ajax({
// url: `https://just.com/check`, //这接口用不了
// method: 'post',
// data: {
// username: $(this).val(),
// },
// success(data){
// if(data.isRegistered){
// $('.tips').text('该用户名已被注册!')
// }else{
// $('.tips').text('恭喜！该用户名还未被注册!')
// }
// },
// error(error){
// console.log(error)
// }
// })
// })
/*
函数防抖(debounce)
*/
function debounce(fn,interval = 300){
let timeout =null;
return function() {
clearTimeout(timeout) // 清除时间
timeout = setInterval(()=>{
fn.apply(this,arguments);
},interval);
}
}
$('input.user-name').on('input', debounce(()=> {
$.ajax({
url: `https://just.com/check`, //这接口用不了
method: 'post',
data: {
username: $(this).val(),
},
success(data){
if(data.isRegistered){
$('.tips').text('该用户名已被注册!')
}else{
$('.tips').text('恭喜！该用户名还未被注册!')
}
},
error(error){
console.log(error)
}
})
})
总结：函数节流和函数去抖的核心就是使用setTimeout 和 clearTimeout 限制一个方法被频繁的触发。