Get the App
SLTechnology News&Howtos  ›  Development  › 

How to realize function throttling by js

Shulou Source: shulou.com Published: 2022-06-01 04:24:32 09月11日 Update

This article will explain in detail how to achieve function throttling in js. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Function throttling (Throttle)

The purpose of throttling is to prevent some operations from being performed too quickly. For example, the onresize event occurs when the browser is resized, and if you do some DOM operations inside it, this high-frequency preference may crash the browser. In order to avoid this situation, the function throttling method can be adopted.

Function throttle (method, context) {clearTimeout (method.tId); method.tId = setTimeout (function () {method.call (context);}, 100)}

Here you accept two parameters, the function to be executed, and the environment in which to execute. During execution, the previous timer is cleared, then the current timer is assigned to the method's tId, and then call is called to determine the execution environment of the function.

An example of an application

Function resizeDiv () {let div = document.getElementById ('div'); div.style.height = div.offsetWidth + "px";} _ window.onresize = function () {throttle (resizeDiv);} this article on "how to achieve function throttling in js" ends here. I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, please share it for more people to see.

Tags: Functions articles timers more browsers environments browsing good practical two events examples content parameters size situation articles ways methods times Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Xiaomi vpn Shulou Technology Docker macOS