车辆控制解决方案

车辆控制解决方案

/*
* @Purpose: 优化车辆控制的功能 -> 用户在控制车辆状态时，实现控制按钮点击状态改变只触发一次onSwitchChange事件，不再下发控制指令，同时清除加载车辆实时状态的定时器status_interval直到有返回值再开启，并且给重新开启定时器这个操作加一个7秒延时，确保控制按钮不会发生跳变。
* @File Name: 车辆控制解决方案
* @Author: Caroline
* @Modifications: 2023/12/08
*/

bd_vehicle.js

车辆控制优化代码

function loadVehicleStatus() {
    ...
    $.post(app_ctl + '/status', {
        option: 0,
        application_id: application_id_val,
        obu_id: obu_id_val,
        demo_flag: demo
    }, function (data, status) {
	if(data){
	    // console.log("status===",data.data);
            //  data =  JSON.parse(data);
          }
        if (status == "success" && data && data.request == "success") {
            ...
            if (lastDateTime == "" || lastDateTime != newDateTime) {
                ...
                $.each(oJson, function (key, value) {
                     ...
                    if(car_states[key]!=undefined){
                        var img_id = car_states[key];
                        img_state = value;
                        // console.log('key:',key,'value',value,',img_id:',img_id,',img_state:',img_state);
                        if(img_state =="1" || img_state ==1){                    
                            $('#car-'+img_id).show();
                            $('#'+img_id).bootstrapSwitch('state', true, true);    
                        }
                        else{
                            $('#car-'+img_id).hide();
                            $('#'+img_id).bootstrapSwitch('state', false, true);    
                        }                                            
                    }  
                });
                ...
            } else {
                console.log("car-status response the data with same time.(", newDateTime, ")");
            }
        } else {
            console.log("car-status error!", data);
        }
        statueUpdateFlag = false; //完成访问
    });
}

$(function () {
    ... 
    //控制按钮状态
    $("[name='cbx-control']").bootstrapSwitch({
        onText: "开启",
        offText: "关闭",
        onColor: "success",
        offColor: "info",
        size: "mini",
        onSwitchChange: function (event, state) {
            id = $(this).attr("id")
            var option_val = state; //?"1":"0";
            // console.log(id, ",click,", option_val);
            if (status_timeout) clearTimeout(status_timeout);
            clearInterval(status_interval);
            $.post(app_ctl + '/control', {
                control_id: id,
                option: option_val,
                obu_id: obu_id_val
            }, function (data, status) {
                if (status == "success" && data && data.request == "success") {
                    console.log(data.msg);
                    controlStatus[id] = state;
                    // if(state){                    
                    //     $('#car-'+id).show();
                    // }
                    // else{
                    //     $('#car-'+id).hide();
                    // }
                    $("#" + html_pref + id).html(state ? "开启" : "关闭");
                } else {
                    console.log("car-control error!", data);
                }
                // 添加延时
                status_timeout = setTimeout(function() {
                    status_interval = setInterval(loadVehicleStatus, 3000);
                }, 7000);
            });
        }
    });
    //加载地图、坐标、轨迹
    var systemReadStatusInterval = setInterval(function () {
        ...
    }, 1000);
    //加载车辆实时状态
    var status_interval = setInterval(loadVehicleStatus, 3000);
    console.log("system init.");
});

问题总结

1. 车辆控制优化点一

• 实现控制按钮点击状态改变只触发一次onSwitchChange事件，之后只读取后端状态显示，不再触发onSwitchChange事件。
• 其中bootstrapSwitch插件：state方法的第三个参数为可选参数skip，如果为true，onSwitchChange事件将不被执行，默认值为false。第二个参数为可选参数skip，如果为true，switchChange事件将被执行，false不执行。

if(img_state =="1" || img_state ==1){                    
	$('#car-'+img_id).show();
	$('#'+img_id).bootstrapSwitch('state', true,true);    
}
else{
	$('#car-'+img_id).hide();
	$('#'+img_id).bootstrapSwitch('state', false,true);    
}

2. 车辆控制优化点二

• onSwitchChange事件执行后清除加载车辆实时状态的定时器status_interval，收到后端返回结果后再开启这个定时器。

// status_timeout声明为外部变量，确保它在多次点击之间保持唯一性。
var status_timeout;
onSwitchChange: function (event, state) {
	id = $(this).attr("id")
	var option_val = state; //?"1":"0";
	// console.log(id, ",click,", option_val);
    // 进行一个判空操作，清除之前的status_timeout延时器
	if (status_timeout) clearTimeout(status_timeout);
    // 清除加载车辆实时状态的定时器status_interval
	clearInterval(status_interval);
	$.post(app_ctl + '/control', {
		control_id: id,
		option: option_val,
		obu_id: obu_id_val
	}, function (data, status) {
		if (status == "success" && data && data.request == "success") {
			console.log(data.msg);
			controlStatus[id] = state;
			$("#" + html_pref + id).html(state ? "开启" : "关闭");
		} else {
    		console.log("car-control error!", data);
		}
        // 添加延时7秒
        status_timeout = setTimeout(function() {
         	// 重新开启加载车辆实时状态的定时器status_interval   
            status_interval = setInterval(loadVehicleStatus, 3000);
        }, 7000);
	});
}

3. 车辆控制优化点三

• 给控制按钮加一个延时操作，onSwitchChange事件执行后给清除加载车辆实时状态的定时器status_interval添加setTimeout7秒延时，status_interval定时器依旧为三秒请求一次status状态
• 其次，避免多次点击均触发延时操作，所以每一次点击control状态改变都清除延时器clearTimeout(status_timeout)
• 对status_timeout进行判空操作
• status_timeout的声明，一定要为外部变量，局部变量会导致，每次点击按钮都会重新声明status_timeout，要确保多次点击之间的一致性。
• 如果status_timeout 是在 onSwitchChange 函数内声明的局部变量，每次点击按钮时都会重新声明。这就导致了在一个点击事件完成之前，新的点击事件会创建一个新的 status_timeout，这可能导致不同的点击事件之间的混淆和冲突。