在原生小程序中使用 TypeScript 开发并封装防抖函数的示例代码如下：
首先，在项目中创建一个新的 TypeScript 文件，例如 debounce.ts。
type Noop = () => void;
function isFunction(func: unknown): func is Noop {
return typeof func === 'function';
}
function debounce(func: Noop, wait: number, immediate: boolean = false) {
let timeout: number | null;
const debounced = function (this: unknown, ...args: unknown[]) {
const context = this;
if (timeout) clearTimeout(timeout);
if (immediate) {
const callNow = !timeout;
timeout = window.setTimeout(() => {
timeout = null;
}, wait);
if (callNow) func.apply(context, args);
} else {
timeout = window.setTimeout(() => {
func.apply(context, args);
}, wait);
}
};
debounced.cancel = function () {
clearTimeout(timeout as number);
timeout = null;
};
return debounced;
}
export default debounce;然后，在需要使用防抖函数的页面或组件中引入该函数：
import debounce from '路径/debounce';
Page({
handleAction: debounce(function (this: any, event: any) {
// 处理事件
}, 1000), // 1000毫秒后执行
onLoad: function () {
// 页面加载完成处理
},
// 取消防抖
onUnload: function () {
if (this.handleAction.cancel) {
this.handleAction.cancel();
}
}
});在上述代码中，debounce 函数被用于创建一个新的函数，该新函数会在一定的时间间隔内延迟执行。如果在这个时间间隔内再次调用该函数，则会重新计时。这样做可以有效减少在某些频繁发生的事件（如滚动事件）中不必要的计算或网络请求。