WdBly Blog

懂事、有趣、保持理智

周维的个人Blog

懂事、有趣、保持理智

站点概览

周维 | Jim

603927378@qq.com

推荐阅读

js中的防抖和节流函数,和在React中使用函数防抖

一步步实现js防抖和节流函数,包括在React中对事件绑定节流函数。

节流

每隔一段时间,只会执行一次回调函数。

场景

对于一些触发频率很高的回调函数,可以使用函数节流优化,如window.onresizewindow.onscorll等事件。

window.onresize = function(){ fn(); }

在这里如果我们改变窗口大小,fn会被频繁执行多次。

应用节流函数

function throttle(fn, delay = 100){ var timer = null; return function() { if (timer) { return; } timer = setTimeout(() => { fn.apply(this, arguments); timer = null; }, delay) } } function fn(){ console.log(1) } window.onscorll = throttle(fn, 1000);

应用函数节流后,window.onscorll每次触发时,都会执行throttle返回的匿名函数,在该函数中,可以获取到throttle中的timer变量用于判断是否到了delay时间,从而执行fn函数

上方节流函数的一些问题:

在设置好delay后,意味着fn最大延迟执行时间就是delay,用户停止滑动后最多要等待delay时间才会有相应。

防抖

每次事件的触发都会延时fn执行。

场景

公交等人案例: 公交车到站后会打开前门等待乘客上车,司机开门后会等待5秒,若是这5秒内没有人上车则关闭车门,若是5秒内有人上车则重置等待时间,直到5秒内没有上车的乘客为止。

公交车等人案例就是一个典型的防抖场景,我们将公交车关门事件比作回调函数,乘客上车比作事件触发,就是一个防抖函数。

function debounce(fn, delay) { var timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } function fn() { console.log(1) } document.onclick = debounce(fn, 1000);

在React中使用函数防抖

<input onChange={this._debounce(this._search, 500)} _debounce = (fn, delay) => { var _this = this; return function() { _this.keyword = arguments[0]; clearTimeout(_this.timer); _this.timer = setTimeout(() => { fn.apply(_this, arguments); }, delay); }; } _search = keywords => { ... }

在React中使用函数防抖需要注意的是, 要timer状态放置到全局中this中,而不是定义在_debounce函数里,这样处理得原因在于,若是在防抖函数中出现了状态的变化, React会重新执行render方法, 从而再次执行_debounce函数将timer重置为null,出现状态问题。

应用

用户执行模糊搜索时,我们在搜索框的onChange事件中向后台请求搜索。这样搜索频率太高了,造成服务器压力大。

解决方案是使用函数防抖,在用户输入后等待一段时间在向服务器发送请求,若是在这段时间内用户继续输入则重置等待时间即可

function debounce(fn, delay) { var timer = null; return function() { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, arguments); }, delay); } } function fn() { ajax(...) } document.querySelector(".search").onChange = debounce(fn, 500)
提交

全部评论0

暂时没有评论...