В настоящее время я застрял в интерфейсе плагина, который пишу. Я пытаюсь отложить выполнение функции фильтра для элементов строки таблицы HTML (hide (), show ()) и маркеров на листовой карте до тех пор, пока они не будут созданы, но Firefox всегда выдает мне ошибку
TypeError: job.tableRow не определен
Если я закомментирую создание таблицы строк, я получу точно такую же проблему с маркерами на листовой карте.
Я много читал об отложенных объектах jQuery и пробовал 2 или три способа их реализации, но, похоже, я все еще упускаю что-то важное.
Что работает:
Я могу успешно отфильтровать задания, которые отображаются / скрываются в списке и на карте вручную после полной загрузки страницы.
Однако, если я пытаюсь выполнить некоторую начальную фильтрацию, я получаю ошибку. Похоже, что функция фильтрации выполняется до создания tableRow.
Итак, мой текущий код выглядит так:
//inside the "main" function
if(jobs != null){
/* this code works
createMarkers(jobs);
createJobTable(jobs, tableBody);
*/
//but like this it does not
$.when( createMarkers(jobs), createJobTable(jobs, tableBody)).done(filterJobs);
function filterJobs(){
...
//go through array of jobs and hide markers and list entry of those, with status that is not checked
for (i = 0, max = jobs.length ; i < max; i++){
job = jobs[i];
if (shownJobStatus.includes (job['status']) ){
job.tableRow.show();
job.marker.addTo(jobmap);
}
else {
job.tableRow.hide();
job.marker.remove();
}
}
}
function createMarkers(jobs){
jQuery(function($){
var deferred = $.Deferred();
for (i = 0; i < jobs.length; i++){
//extract lat, lon, ... from job, I leave out again
job.marker = L.marker([lat, lon], {icon: markerIcon}).addTo(jobmap);
job.marker.bindPopup(jobName).openPopup();
}
deferred.resolve();
return deferred;
})
}
function createJobTable(jobs, tableBody){
jQuery(function($){
let promiseArray = [];
for (i = 0; i < jobs.length; i++){
job = jobs[i];
promiseArray.push( createJobTableEntry(job, tableBody) );
}
deferred.resolve();
return Promise.all(promiseArray);
})
}
function createJobTableEntry(job, tableBody){
jQuery (function($){
let defer = $.Deferred();
const jobId = job['id'];
job.tableRow = $("<tr></tr>");
tableBody.append(job.tableRow);
//put lots of stuff in the table like this
job.tableRow.append($("<td></td>").text(job.jobName));
//lots of user-role dependant stuff
defer.resolve();
return defer.promise();
})
}
Я думал, что линия
$.when( createMarkers(jobs), createJobTable(jobs, tableBody)).done(filterJobs);
должен выполнять filterJobs () только после разрешения отложенного возврата createMarkers и createJobTable. Отложенное должно быть разрешено только после того, как все элементы были созданы. Так почему же это не работает?