JS封装节流函数

简介: JS封装节流函数

节流函数是一种常用的优化方法,用于限制一个函数在一定时间内只能执行一次,可以有效避免高频率触发函数执行的问题。下面是一个使用原生JS实现的节流函数及一个例子:

function throttle(func, delay) {
  let timer = null;
  let lastRunTime = 0;
  return function() {
    let context = this;
    let args = arguments;
    let currentTime = Date.now();
    clearTimeout(timer);
    if (currentTime - lastRunTime >= delay) {
      func.apply(context, args);
      lastRunTime = currentTime;
    } else {
      timer = setTimeout(function() {
        func.apply(context, args);
        lastRunTime = Date.now();
      }, delay);
    }
  };
}
// 例子:每隔500ms打印一次当前时间
function printTime() {
  console.log(new Date().toLocaleTimeString());
}
const throttledPrintTime = throttle(printTime, 500);
setInterval(throttledPrintTime, 100);

在上述代码中,throttle函数接受两个参数:func是要节流的函数,delay是限制的时间间隔。返回一个新的函数,在调用新函数时,会根据当前时间判断是否执行func

在例子中,我们定义了一个printTime函数,用于打印当前时间。我们使用throttle函数对printTime进行节流,将节流后的函数赋值给throttledPrintTime

然后,我们使用setInterval每100ms调用一次throttledPrintTime函数。由于throttledPrintTime被节流限制为每500ms执行一次,所以实际上每隔500ms才会打印一次当前时间。

这样,通过节流函数可以有效限制函数的执行频率,避免过多的执行次数。

目录
相关文章
|
10天前
|
JavaScript 前端开发
JavaScript 闭包:让你更深入了解函数和作用域
JavaScript 闭包:让你更深入了解函数和作用域
|
2天前
|
JavaScript 前端开发 Java
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
javascript是弱类型语言,一个函数参数可以接收不同类型的变量作为它的该参数
10 0
|
6天前
|
前端开发 JavaScript
前端 JS 经典:函数管道
前端 JS 经典:函数管道
5 0
|
10天前
|
JavaScript 前端开发 网络架构
函数柯里化:JavaScript中的高级技巧
函数柯里化:JavaScript中的高级技巧
|
10天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
10天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
10天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
11天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
【5月更文挑战第11天】JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
21 2
|
11天前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指什么
【5月更文挑战第9天】JavaScript中的异步函数用于处理非立即完成的操作,如定时器、网络请求等。它们可通过回调函数、Promise或async/await来实现。示例展示了如何使用async/await模拟网络请求:定义异步函数fetchData返回Promise,在另一异步函数processData中使用await等待结果并处理。当fetchData的Promise解析时,data变量接收结果并继续执行后续代码。注意,调用异步函数不会阻塞执行,而是会在适当时间点继续。
17 0
|
11天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
17 1