前端开发如何处理竞态问题？

问题及相关概念

在前端开发里，竞态问题指的是因异步操作的执行顺序与时间不确定，从而致使程序行为不符合预期的情况。在异步编程里，像网络请求、定时器这类操作并非马上执行完成，而是在未来某个时刻结束。若这些异步操作的结果被用于更新页面状态或者数据，并且执行顺序与时间无法精准控制，就容易引发竞态问题。

举例场景

搜索建议：当用户在搜索框输入关键词时，前端会依据输入内容发起网络请求以获取搜索建议。如果用户输入速度很快，就可能在之前的请求还未返回结果时又发起新的请求。若不做处理，后发起的请求结果可能先返回，进而覆盖掉正确的搜索建议。
分页加载：在实现分页加载数据的功能时，用户快速切换页码，会在短时间内发起多个请求。若请求返回顺序错乱，就会让页面显示的数据与当前页码不对应。

处理方法及示例

1. 取消上一个请求

借助 AbortController 可以取消正在进行的请求，防止旧请求结果覆盖新请求结果。

javascript 复制代码

function searchSuggestions(input) {
    let controller;

    return function () {
        // 取消上一个请求
        if (controller) {
            controller.abort();
        }

        controller = new AbortController();
        const signal = controller.signal;

        // 发起新请求
        fetch(`/api/suggestions?input=${input}`, { signal })
           .then(response => response.json())
           .then(data => {
                // 处理响应数据
                console.log(data);
            })
           .catch(error => {
                if (error.name === 'AbortError') {
                    console.log('请求被取消');
                } else {
                    console.error('请求出错:', error);
                }
            });
    };
}

const search = searchSuggestions('apple');
search(); // 发起第一次请求
search(); // 发起第二次请求，取消第一次请求

2. 标记请求顺序

给每个请求添加唯一标识，在处理响应时检查标识，只处理最新请求的结果。

javascript 复制代码

let requestId = 0;

function searchSuggestions(input) {
    const currentId = ++requestId;

    fetch(`/api/suggestions?input=${input}`)
       .then(response => response.json())
       .then(data => {
            if (currentId === requestId) {
                // 处理响应数据
                console.log(data);
            } else {
                console.log('忽略旧请求结果');
            }
        })
       .catch(error => {
            console.error('请求出错:', error);
        });
}

searchSuggestions('apple');
// 模拟快速发起新请求
setTimeout(() => {
    searchSuggestions('banana');
}, 100);

3. 队列请求

把请求放进队列，按顺序依次处理，确保前一个请求完成后再处理下一个请求。

javascript 复制代码

class RequestQueue {
    constructor() {
        this.queue = [];
        this.isProcessing = false;
    }

    addRequest(request) {
        this.queue.push(request);
        this.processQueue();
    }

    processQueue() {
        if (this.isProcessing || this.queue.length === 0) {
            return;
        }

        this.isProcessing = true;
        const request = this.queue.shift();

        request()
           .then(() => {
                this.isProcessing = false;
                this.processQueue();
            })
           .catch(error => {
                console.error('请求出错:', error);
                this.isProcessing = false;
                this.processQueue();
            });
    }
}

const queue = new RequestQueue();

function searchSuggestions(input) {
    return () => {
        return fetch(`/api/suggestions?input=${input}`)
           .then(response => response.json())
           .then(data => {
                // 处理响应数据
                console.log(data);
            });
    };
}

queue.addRequest(searchSuggestions('apple'));
queue.addRequest(searchSuggestions('banana'));

另外，防抖和节流可以通过控制事件的触发频率，减少不必要的请求或操作，从而在一定程度上避免前端竞态问题的发生。

防抖（Debounce）

原理

防抖是指在一定时间内，只有最后一次触发事件才会执行相应的操作。当事件被触发时，会开启一个定时器，若在定时器计时期间该事件再次被触发，就会清除之前的定时器并重新计时。只有当定时器计时结束且期间没有再次触发事件，才会执行相应的操作。

适用场景

防抖适用于需要避免短时间内频繁触发事件的场景，比如搜索框输入提示、窗口大小改变事件等。在搜索框输入提示场景中，用户输入时可能会快速输入多个字符，使用防抖可以避免在用户输入过程中频繁发起请求，只有当用户停止输入一段时间后才发起请求，减少不必要的请求，从而避免竞态问题。

示例代码

javascript 复制代码

function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}

// 模拟搜索建议请求
function searchSuggestions(input) {
    console.log(`发起搜索建议请求，关键词：${input}`);
    // 这里可以添加实际的网络请求代码
}

const debouncedSearch = debounce(searchSuggestions, 300);

// 模拟用户快速输入
const inputElement = {
    value: 'apple',
    addEventListener: function(event, callback) {
        // 模拟用户输入事件
        callback();
    }
};

inputElement.addEventListener('input', () => {
    debouncedSearch(inputElement.value);
});

节流（Throttle）

原理

节流是指在一定时间内，只执行一次事件处理函数。当事件被触发时，会检查距离上一次执行事件处理函数的时间是否超过了设定的时间间隔，如果超过了则执行事件处理函数并更新上一次执行的时间；如果没有超过，则忽略本次触发。

适用场景

节流适用于需要限制事件触发频率的场景，比如滚动加载数据、按钮点击等。在滚动加载数据场景中，用户滚动页面时会不断触发滚动事件，如果不进行节流处理，可能会在短时间内发起大量请求，使用节流可以确保在一定时间内只发起一次请求，避免竞态问题。

示例代码

javascript 复制代码

function throttle(func, limit) {
    let inThrottle;
    return function() {
        const context = this;
        const args = arguments;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 模拟滚动加载数据
function loadMoreData() {
    console.log('加载更多数据');
    // 这里可以添加实际的网络请求代码
}

const throttledLoadMore = throttle(loadMoreData, 1000);

// 模拟滚动事件
window.addEventListener('scroll', throttledLoadMore);

通过以上方法，能够有效避免前端开发中因异步操作引发的竞态问题，保证程序的正确性与稳定性。