Home > Web Front-end > JS Tutorial > body text

Detailed introduction to anti-shake throttling in JavaScript (code example)

不言
Release: 2019-01-14 09:44:19
forward
2558 people have browsed it

This article brings you a detailed introduction (code example) about anti-shake throttling in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Function throttling and function anti-shake are both a means of optimizing high-frequency execution of js code.

Function throttling (throttle) and function debounce (debounce) are both used to limit the execution frequency of the function to optimize the response speed caused by the function trigger frequency being too high to keep up with the trigger frequency, resulting in delays, suspended animation or The phenomenon of lag.

Function throttling (throttle)

Function throttling means that an operation performed within a certain period of time is only performed once, that is to say, an execution cycle is set in advance. When the moment when the action is called is greater than or equal to the execution cycle, the action is executed and then enters the next new cycle. A more vivid example is if you tighten the faucet until the water flows out in the form of drops, then you will find that every once in a while, A drop of water will come out.

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 处理函数
function handle() {   
    console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
Copy after login

Function debounce (debounce)

Function debounce means that within a certain period of time, when the action is continuously and frequently triggered, the action will only be executed. Once, that is to say, the action will be executed only after n milliseconds have elapsed since the action was called. If this action is called again within these n milliseconds, the execution time will be recalculated, so continuous actions in a short period of time will only be triggered once, for example Say you keep your finger on a spring and it won't spring up until you let go.

Timestamp

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));
Copy after login

Timer

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
Copy after login

The above is the detailed content of Detailed introduction to anti-shake throttling in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!