节流函数（JS）

已于 2022-03-31 10:41:31 修改
阅读量94 收藏
点赞数
文章标签： JavaScript 节流 事件处理 性能优化 延迟触发
于 2021-10-13 23:45:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47997447/article/details/120754914
版权 
// 在规定时间delay内，触发了一次事件就不会触发事件了，只有过了delay时间才可以从新触发事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>节流</title>
</head>
<body>
<div>
  <button id="btn">节流</button>
</div>
<script>
  function th(func,delay){
    let time;
    //形成闭包，返回一个函数
    return function () {
      //如果为真
      if(!time){
        //time有值了，再点击就不会触发点击事件。
        time = setTimeout(()=>{
          func()
          //定义为false，两秒后就可以继续点击。
          time = false;
        },delay)
      }
    }
  }
  //回调函数
  function handle(){
    //随机生成一个小数
    console.log(Math.random())
  }
  document.getElementById('btn').onclick = th(handle,2000)
</script>
</body>
</html>
codekjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中节流函数介绍与实现（秒懂如何手写节流）
百赢出品，必属精品
04-03 1969
它会设置一个时间间隔，只有当两次事件触发的时间间隔超过了这个设定的时间间隔时，才会执行处理函数。如果两次触发事件的时间间隔小于设定的时间间隔，那么处理函数就不会被执行，从而实现了控制函数执行频率的效果。节流函数在实际开发中经常被用来优化高频触发的事件处理，例如在页面滚动、输入框输入等场景下，通过节流来控制函数的执行频率，从而提升页面性能和用户体验。节流函数是一种用于控制函数执行频率的技术。它可以确保函数在一定时间间隔内最多只执行一次，从而避免频繁触发导致性能问题或不必要的资源消耗。基本实现手写防抖函数。
节流函数
kola的博客
04-09 9019
节流函数就是在单位时间（10s）内随便触发多少次，只要过了单位时间（10s）就会执行一次。 应用场景是：用户在输入框内疯狂输入字符串，每经过单位时间就会向后端发起请求查询数据库。 节流函数有两种实现方式：1.定时器 2.计算时间差 时间差实现 function throttle(fn, delay) { let previous = 0; // 使用闭包返回一个函数并且用到闭包函数外面的变量previous return function() { let args = argume
防抖与节流
langmanboy的博客
05-04 2598
防抖与节流 防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能以及避免资源浪费 节流是第一个说了算，后续都会被节流阀屏蔽掉，防抖是最后一个说了算，前面启用的都会被清除 1. 防抖函数 防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间 <input type="text"> <script> // 防抖 事件触发 n 秒后执行一次, 如果在 n 秒
JavaScript：节流与防抖
最新发布
m0_65029152的博客
07-20 919
本文主要记录JavaScript中，防抖和节流的相关内容和技术应用；
JS高级——节流函数
@SCY
02-26 5427
在某个时间内（比如500ms），某个函数只能被触发一次；过程：当事件触发时，相应的函数并不会立即触发，按照一定的频率去执行默认情况下，我们的防抖函数最后一次是不会执行的因为没有达到最终的时间，也就是条件满足不了的但是，如果我们希望它最后一次是可以执行的，那么我们可以让其传入对应的参数来控制我们来看一下代码如何实现：我们增加了else语句：所以我们可以使用timer变量来记录定时器是否已经开启已经开启的情况下，不需要开启另外一个定时器了else语句表示没有立即执行的情况下，就会开启定时器；
详解防抖函数（debounce）和节流函数（throttle）
dksks130的博客
12-06 9096
详解防抖函数（debounce）和节流函数（throttle）
JS中的节流
weixin_49592687的博客
04-23 1万+
节流相较于防抖来说就简单多了, 用简单的话来说,防抖就是只执行最后一次;那么节流就是控制事件触发的次数接下来还是用代码说话 1. 为什么有节流 首先下面有一段这样的代码 window.addEventListener('scroll',function(){ console.log(123); }); 运行到浏览器中后,就会有这样的情况 每次滚动都会触发这个事件,但是仅仅几秒钟就已经触发了200多次,那如果是和后台交互数据的话,这样的频率和数据量会
防抖节流函数js封装模块
10-19
防抖（debounce）和节流（throttle）是常用的两个 JavaScript 函数优化技术，它们可以帮助我们避免在高频率事件触发时导致的性能问题。 防抖和节流的主要区别在于它们处理事件触发的方式不同。防抖在事件触发后等待...
JavaScript 节流函数 Throttle 详解
10-22
JavaScript中的节流函数Throttle是一种优化技术，用于限制函数的执行频率，特别是在处理与用户交互频繁的事件，如resize、scroll或mousemove时。当事件触发过于频繁，可能会导致性能问题，因为频繁执行的函数可能...
js代码-手写节流函数
07-16
在JavaScript编程中，"节流函数"（Throttle Function）是一种优化技术，用于限制函数执行的频率，以防止过度调用导致性能问题。这在处理滚动事件、窗口resize事件或频繁触发的计时器等场景中尤其有用。本文将深入...
js防抖函数和节流函数使用场景和实现区别示例分析
10-15
JavaScript中的防抖函数（debounce）和节流函数（throttle）是优化性能的关键工具，它们常用于处理高频触发的事件，如窗口的resize、scroll事件，输入框的input事件等。这些事件如果不加以控制，可能会导致浏览器...
浅谈JavaScript函数节流
10-25
下面是一个简单的节流函数实现： ```javascript function throttle(method, context) { var timeout; return function() { var args = arguments; var later = function() { timeout = null; if (!timeout) {...
JavaScript第 13 篇，JavaScript节流函数，JavaScript节流功能的应用（JS节流函数，节流功能的应用与解析，深入了解JavaScript节流函数）
weixin_65793170的博客
04-04 1万+
节流就是某一高频事件不断被触发时，将多次执行变成每隔一段时间执行，具体点就是减少一个事件在一段时间内的触发频率，它是一种常用的函数优化技术，可以限制函数的执行频率，从而提高网页的性能和用户体验，这里带你深入了解下JavaScript节流函数的概念、实现原理和应用场景，并提供一些实用的代码示例。
JS防抖和节流（详解）
Zhang_wang_yun的博客
04-10 4725
函数节流（throttle）与函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数节流详解
田兴的博客
11-05 3645
一、什么是函数节流（throttle） 首先函数节流的概念是什么？ 限制一个函数在一定时间内只能执行一次。 举个栗子： 接下来，我给大家举个栗子， 。 二、为什么需要函数节流 前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很
JS—节流与防抖
热门推荐
weixin_45709829的博客
04-01 4万+
一、js防抖和节流 在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。 二、为什么滚动scroll、窗口resize等事件需要优化 滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。 在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非
js 函数防抖(debounce)与节流(throttle)
青蛙king的博客
07-21 4220
一、函数防抖 二、函数节流
JS手写防抖和节流函数（超详细版整理）
m0_56698268的博客
03-27 5470
JavaScript手写防抖和节流函数，及应用场景优化
js 节流
qq_43527043的博客
09-20 248
节流
js方法，实现节流函数
01-10
节流函数是一种在特定时间内限制函数执行频率的实用工具。在JavaScript中，你可以使用节流函数来控制一个函数的执行速度，例如限制鼠标事件处理函数的执行频率，或者控制定时器的间隔。 以下是一个简单的JavaScript节流函数的实现： ```javascript function throttle(func, delay) { let lastCall = 0; return function(...args) { const now = new Date().getTime(); if (now - lastCall < delay) { return; } lastCall = now; return func.apply(this, args); }; } ``` 这个节流函数接受两个参数：一个是你想要限制频率的函数，另一个是延迟时间（以毫秒为单位）。这个函数返回一个新的函数，当你调用这个新函数时，如果过去的延迟时间已经过去，那么就会执行原始的函数，否则就会忽略这次调用。 以下是如何使用这个节流函数的例子： ```javascript // 假设有一个需要频繁执行的函数 function expensiveFunction() { // 这里是一些昂贵的操作... } // 使用节流函数限制其执行频率 const throttledFunction = throttle(expensiveFunction, 200); // 每200毫秒执行一次 // 在某个需要频繁触发的事件上使用节流函数 document.addEventListener('mousemove', throttledFunction); ``` 在这个例子中，`expensiveFunction`被限制在每200毫秒执行一次。这样就可以避免频繁的执行导致性能问题。注意，这个节流函数只对浏览器的事件处理函数有效，因为它依赖于浏览器的定时器系统。对于其他类型的函数，你可能需要使用不同的方法来实现节流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值