面试题js防抖和节流

2024-09-01

js面试题之手写节流函数和防抖函数

函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,delay){ // 记录上一次函数出发的时间 var lastTime = 0 return function(){ // 记录当前函数触发的时间 var nowTime = new Date().getTime() // 当当前时间减去上一次执行时间大于这个指定间隔时间才让他触发这个函数 if(nowT

深入理解JS防抖与节流

参考博客:JS防抖和节流,感谢作者的用心分享日常开发过程中,滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿,这时候我们更希望把多次计算合并成一次,只操作一个精确点,JS把这种方式称为debounce(防抖)和throttle(节流) 函数防抖当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定时间到来之前,又触发了事件,就重新开始延时.也就是说当一个用户一直触发这个函数,且每次触发函数的间隔小于既定时间,那么防抖的情况下只会执行一次. function

因为它，我差点删库跑路：js防抖与节流

前言前端踩雷:短时间内重复提交导致数据重复. 对于前端大佬来说,防抖和节流的技术应用都是基本操作.对于"兼职"前端开发的来说,这些都是需要躺平的坑. 我们今天就来盘一盘js防抖与节流,并且解决开发中遇到的问题. PS:重复提交问题我用的是防抖的方法进行避免. 防抖的概念防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 前端开发中,常见的事件如,onresize,scroll,mo

面试必问题：JS防抖与节流

摘要:防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 本文分享自华为云社区<JS防抖与节流快速了解与应用>,作者:北极光之夜. . 一.速识防抖: 防抖与节流可谓是面试常见,其实很好理解,下面带你分分钟了解防抖与节流的基本思想与写法~ 在这之前,比如我们先定义一个按钮,并绑定一个点击事件,执行要触发的事件:  <input type="button" id="btn"

js防抖和节流

今天在网上看到的,里面的内容非常多.说下我自己的理解. 所谓的防抖就是利用延时器来使你的最后一次操作执行.而节流是利用时间差的办法,每一段时间执行一次.下面是我的代码: 这段代码是右侧的小滑块跟随页面一起滑动. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>为了测试防抖和节流</title> <link rel="styles

2019 面试准备 - JS 防抖与节流 (超级重要!!!!!)

Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址本文涉及知识点: 防抖与节流重绘与回流浏览器解析 URL DNS 域名解析 TCP 三次握手与四次挥手浏览器渲染页面在本文中,jsliang 会讲解通过自我探索后关于上述知识点的个人理解,如有纰漏.疏忽或者误解,欢迎各位小伙伴留言指出. 如果小伙伴对文章存有疑问,想快速得到回复. 或者小伙伴对 jsliang 个人的前端文档库感兴趣,也想将自己的前端知识整理出来. 欢迎

js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖经过一段事件才执行某个操作,如果时间内又执行了该操作则延长时间重新开始计算 /* 不做处理input触发keyup事件 */ /* 输入快的话会出现输出结果多次重复 */ window.onload = function () { let obj = document.getElementById('input') obj.ad

详谈js防抖和节流

本文由小芭乐发表 0. 引入首先举一个例子: 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>没有防抖</title> <style type="text/css"></sty

JS 防抖和节流

防抖和节流在处理高频事件,类似于window的resize或者scorll,或者input输入校验等操作时.如果直接执行事件处理器,会增大浏览器的负担,严重的直接卡死,用户体验非常不好. 面对这种情况,我们一般可以采用防抖和节流的方式减少调用频率.同时也不会影响实际效果. 一.防抖防抖的作用是:在事件被触发的n秒后执行回调,如果在这n秒内又被触发,则重新计时. 常见场景: input校验:在input输入完成后,不需进行额外操作(比如:点击按钮,或者blur事件),而是需要敲完代码通过key

JS防抖和节流：原来如此简单

一.函数防抖前端开发工作中,我们经常在一个事件发生后执行某个操作,比如鼠标移动时打印一些东西: window.addEventListener("mousemove", ()=>console.log(123)); //测试发现鼠标移动了1毫米,回调函数执行了将近10次,这种做法是非常耗费资源的. 这就像电梯,如果一个电梯的设计是每进去一个人就立即关门,那么如果有10个人排队进会是怎么样呢?多耗电而且很危险. 解决方法就是每进一个人都重新倒计时N秒再关门,这样只要每个人都在前一

js防抖与节流了解一下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JS防抖与节流函数封装

防抖在监听scroll事件的时候经常会用到防抖,当滚动到某一位置而触发状态,从而不会出现频繁滚动持续触发事件的情况防抖的事件处理机制仅触发一次且必须是结束状态下才会执行 function debounce(fun, delay) { let timer; return function() { timer && clearTimeout(timer); timer = setTimeout(function() { fun(); }, delay); } } window.addEve

JS防抖与节流

在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果. 函数防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发scroll事件时,并不执行handle函数,当1000毫秒内

JavaScript 中的防抖和节流

什么是防抖函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时.如下图,持续触发 scroll 事件时,并不执行 handle 函数,当 1000 毫秒内没有触发 scroll 事件时,才会延时触发 scroll 事件. 防抖应用场景如下搜索框输入查询,如果用户一直在输入中,没有必要不停地调用去请求服务端接口,等用户停止输入的时候,再调用,设置一个合适的时间间隔,有效减轻服务端压力. 表

js高阶函数应用—函数防抖和节流

高阶函数指的是至少满足下列两个条件之一的函数: 1. 函数可以作为参数被传递:2.函数可以作为返回值输出: javaScript中的函数显然具备高级函数的特征,这使得函数运用更灵活,作为学习js必定会接触到的闭包也可以通过高阶函数构建,当然本文不打算介绍闭包,我们今天的主题是函数防抖和节流. 首先我们来简单看一下什么是函数防抖和节流,我们开发过程中常经常会用到一些dom事件,比如mouseover.keydown/keyup.input(处理中文输入还可能用到compositionstart/c

JS的防抖与节流

JS的防抖与节流在进行窗口的resize.scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕.此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果. 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时. 如下,持续触发scroll事件时,并不执行handle函数,当1000

JS的防抖和节流

数个月之前,在一次前端的性能优化中,接触到了JS中防抖和节流,一开始还不明白他们的应用在哪里,可后来才知道,这是前端中最基础的性能优化,在绑定 scroll .resize 这类事件时,当它发生时,它被触发的频次非常高,间隔很近.如果事件中涉及到大量的位置计算.DOM 操作.元素重绘等工作且这些工作无法在下一个 scroll 事件触发前完成,就会造成浏览器掉帧.加之用户鼠标滚动往往是连续的,就会持续触发 scroll 事件导致掉帧扩大.浏览器 CPU 使用率增加.用户体验受到影响.尤其是在涉及与

js函数的节流和防抖

js函数的节流和防抖用户浏览页面时会不可避免的触发一些高频度触发事件(例如页面 scroll ,屏幕 resize,监听用户输入等),这些事件会频繁触发浏览器的重拍(reflow)和重绘(repaint)这会严重耗费浏览器性能,造成页面卡顿. 举几个例子:比如说我们在滚动事件中要做一个复杂的计算,或者做一个按钮的防二次点击操作的需求,这些需求都会在频繁的事件回调中做复杂计算,很有可能导致页面卡顿,这时候我们可以将多次计算合并为一次计算,只在一个精确点做操作.这些事可以利用函数的防抖来实现

JS中的防抖与节流

什么是防抖?and什么是节流?一起来开心的学习下吧. 首先什么是防抖:就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次.举个例子,当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6,那这样是不是轻松多了.ok,解释清楚了那么就来看下代码,更加清晰. <!DOCTYPE ht

JS简单实现防抖和节流

一.什么是防抖和节流 Ps: 比如搜索框,用户在输入的时候使用change事件去调用搜索,如果用户每一次输入都去搜索的话,那得消耗多大的服务器资源,即使你的服务器资源很强大,也不带这么玩的. 1. 防抖 - debounce 其中一种解决方案就是每次用户停止输入后,延迟超过500ms时,才去搜索此时的String,这就是防抖. 原理:将若干个函数调用合成为一次,并在给定时间过去之后仅被调用一次. 代码实现: function debounce(fn, delay) { // 维护一个 timer

JS的防抖与节流学习笔记

防抖(debounce):当持续触发事件时,在一定的时间段内,只有最后一次触发的事件才会执行. 例: function debounce(fn, wait) { var timer = null; return function() { if(timer !== null) { clearTimeout(timer); } timer = setTimeout(fn, wait); } } function handle() { console.log('防抖处理!'); } window.ad

面试题js防抖和节流

热门专题