使用闭包,优雅的做前端自动翻页

101 阅读2分钟

省流

export function autoNextPage(callback) {
	let page = 1;
	return function(external, ..._arguments) {
		if (external) page = external;
		callback.apply(this, [page++, ..._arguments])
	};
}
const fun = nextPage(function(page,...arguments) {
    console.log(this)
    console.log(page,...arguments);
});
fun()
fun()
fun()

先说应用场景

在我们的工作中,尤其是app项目,会经常需要开发向下翻动的列表,这时可能就会用到一个全局变量来控制页码数,但其实这个全局变量是不必要的,接下来请看我的分享

type AutoPageRes = <T>(externalPageNum?: number, ...param: any[]) => T;
/**
 * @param {Function} call 该函数默认接收一个页码数
 * @return {Function} (pageNum?, ...param)=>call(pageNum, ...param)
 */
export function autoPage(call: Function): AutoPageRes {
  /**初始页码数 */
  let page = 1;
  return (externalPageNum, ...param) => {//返回一个函数,该函数访问page形成闭包并调用传入的call函数
    if (externalPageNum) page = externalPageNum;
    return call(page++, ...param);
  };
}

方便各位看官老爷们即时测试版

function autoPage(call) {
  /**初始页码数 */
  let page = 1;
  return (externalPageNum, ...param) => {
    //返回一个函数,该函数访问page形成闭包并调用传入的call函数
    if (externalPageNum) page = externalPageNum;
    return call(page++, ...param);
  };
}
const nextPage = autoPage((pageNum,pageSize=20) => {
  console.log("请求页码数",pageNum,"请求页码大小",pageSize);
});
//作为懒人,我肯定是要用定时器来自动测试的
let interval = setInterval(nextPage,1000)//每秒模拟一次翻页

//我们可以开启一个定时器来模拟中途突然需要从头开始翻页
let interval2 =  setInterval(() => {
    console.log("每五秒模拟一次重新翻页执行了")
    nextPage(1,40)
}, 5000);//每五秒模拟一次重新翻页

各位看官老爷们可以F12打开控制台,把上面的代码复制到控制台执行哦!

//停掉你在控制台的定时器
interval  = clearInterval(interval);
interval2  = clearInterval(interval2);
//中途调皮手动调用一下
nextPage(Math.floor(Math.random()*10))

封装好了,如何使用?

import {autoPage} from "path";
import axios from "axios";
//按照约定,需要传入一个函数,该函数默认接收一个pageNum
//因为前面用...param展开运算符接收了并原封不动的传递给了call函数
const getList = autoPage(async (pageNum,pageSize=20)=>{
console.log("请求页码数",pageNum,"请求页码大小",pageSize);
//const res = await axios.post("http://...", {pageNum,pageSize})
//...
})
//作为懒人,我肯定是要用定时器来自动测试的
let interval = setInterval(getList,50)

//我们可以开启一个定时器来模拟中途突然需要从头开始翻页
setTimeout(() => {
  getList(1,40)
}, 5000);

2022/11/26解决this指向的问题

export function autoNextPage(callback) {
	let page = 1;
	return function(external, ..._arguments) {
		if (external) page = external;
		callback.apply(this, [page++, ..._arguments])
	};
}
const fun = nextPage(function(page,...arguments) {
    console.log(this)
    console.log(page,...arguments);
});
fun()
fun()
fun()