Những hàm cực kỳ hữu dụng cho Javascript

07.20.2018

hoangdv

Những ngày đầu của Javascript, nơi bạn chỉ cần những chức năng đơn giản cho mọi thứ, thì các trình duyệt đã chuẩn bị hầu hết những hàm mà lập trình viên Javascript cần. Ví dụ như addEventListener hay attachEvent.

Thời gian đã thay đổi, những hàm hỗ trợ cho lập trình viên ngày càng nhiều lên, nhưng vẫn có những hàm mà lập trình viên lúc nào cũng nên có trong túi của mình.

`Debounce`

Debounce trở thành người thay đổi trò chơi đặc biệt khi bạn chú ý tới hiệu suất của những sự kiện diễn ra liên tục, “cực kỳ” nhanh.

Nếu bạn không sử dụng debounce trong trường hợp xử lý những sự kiện như scroll, resize, key*, có có thể đang làm sia gì đó. Đây là ví dụ cho việc debounce function giữ cho code của bạn đạt hiệu quả và hiệu năng:

// Phương thức debounce trả lại một function, function mà nó sẽ tiếp tục được gọi,
// nhưng sẽ không được thực thi. Function này sẽ được thự thi sau khi dừng lại một
// khoảng thời gian N milliseconds. Nếu tham số `immegiate` được truyền vào thì function 
// sẽ được thực thi ngay mà không cần phải chờ.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this,
            args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

// Sử dụng
var efficientFn = debounce(function() {
    // Xử lý mà bạn mong muốn ở đây
}, 250); // Thời gian chờ cho lần xử lý tiếp theo là 250 milliseconds
window.addEventListener('resize', efficientFn); // Giả sử bạn muốn xử lý gì đó khi có sự kiện
// cửa sổ web bị thay đổi kích thước.

Thông qua ví dụ trên chúng ta có thể hiểu, debounce function sẽ không cho phép một callback được gọi nhiều hơn một lần trong một khoảng thời gian nhất định. Điều này đặc biệt quan trọng khi chúng ta muốn gán xử lý cho một sự kiện mà sự kiến ấy xảy ra liên tục rất nhiều lần trong một khoảng thời gian ngắn.

`Poll`

Với debounce function ở phía trên, chúng ta xử lý cho những hàm callback có gắn với những sự kiện được gọi liên tục, nhưng trong nhiều khi bạn không thể lắng nghe những sự kiện để xử lý những hành động tương ứng – vì sự kiện đó không tồn tại, lúc này chúng ta cần kiểm tra các trạng thái liên tục trong một khoảng thời gian:

// polling function
function poll(fn, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;

    var checkCondition = function(resolve, reject) {
        // Nếu điều kiện được thoả mãn, chúng ta thực hiện hàm và kết thúc
        var result = fn();
        if (result) {
            resolve(result);
        }
        // Nếu điều kiện chưa được thoả mãn, nhưng thời gian chưa hết, tiếp tục làm lại
        else if (Number(new Date()) < endTime) {
            setTimeout(checkCondition, interval, resolve, reject);
        }
        // Hết thời gian mà điều kiện vẫn chưa được thoả mãn, reject
        else {
            reject(new Error('timed out for ' + fn + ': ' + arguments));
        }
    };

    return new Promise(checkCondition);
}

// Sử dụng: Chắc chắn rằng một phần tử có tồn tại và được thể hiện
poll(function() {
    return document.getElementById('userbox').offsetWidth > 0;
}, 2000, 150).then(function() {
    // Xử lý khi chắc chắn phần tử có được hiển thị
}).catch(function() {
    // Hết thời gian, phần tử vẫn không được hiển thị, xử lý lỗi
});

Poll function là một hàm hữu ích khi thực hiện phát triển các ứng dụng web.

`Once`

Có những lúc bạn mong muốn một số hàm nhất định chỉ được xảy ra một lần, nó tương tự mà bạn sử dụng hàm onload khi lập trình web. Đoạn code dưới đây sẽ cho phép bạn làm điều đó:

function once(fn, context) {
    var result;

    return function() {
        if (fn) {
            result = fn.apply(context || this, arguments);
            fn = null;
        }

        return result;
    };
}

// Usage
var canOnlyFireOnce = once(function() {
    console.log('Fired!');
});

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada

Hàm once đảm bảo rằng phương thức bạn mong muốn chỉ được thực thi đúng một lần, điều này đảm bảo việc khởi tạo một biến hay đối tượng không bị trùng lặp.

`getAbsoluteUrl`

Việc lấy một đường dẫn tuyệt đối của đường dẫn của webapp hiện tại có thể không dễ như bạn nghĩ. Có hàm khởi tạo đối tượng URL nhưng nó không thể hoạt động nếu bạn không cung cấp đủ các tham số bắt buộc (trong một vài trường hợp bạn không thể).

Dưới đây là một thủ thuật để bạn có thể nhận được một đường dẫn tuyệt đối kết hợp với một chuỗi đầu vào:

var getAbsoluteUrl = (function() {
    var a;

    return function(url) {
        if (!a) a = document.createElement('a');
        a.href = url;

        return a.href;
    };
})();

// Usage
getAbsoluteUrl('/something'); // https://codetheworld.io/something

Việc khởi tạo một thẻ a “vô nghĩa” với thuộc tính href sẽ giúp chúng ta có một đường dẫn URL tuyệt đối.

Từ khóa: debounce, function