Zip Generated JSZip содержит только один файл изображения

Question

Я пытаюсь сгенерировать zip из изображений, используя JSZip. Но каждый раз я получаю только одно изображение в виде zip вместо 100 изображений. Вот мой код

   $("#download-images-small").on("click", function(){

        var zip = new JSZip();
        var count = 0;
        var zipFilename = "zipFilename.zip";
        var selections = $('.checkbox:checked')  //This returns an array of checkbox selected elements. 
        // Each checkbox contains URL in its data attribute ie. selections = ['url1', 'url2', 'url3'...]. See HTML Code.  

        for (var i = selections.length - 1; i >= 0; i--) {
            var filename = "filename"+ i +"."+ $(selections[i]).data("type");
            // loading a file and add it in a zip file
            console.log($(selections[i]).data("href"))
            JSZipUtils.getBinaryContent($(selections[i]).data("href"), function (err, data) {
               if(err) {
                  throw err; // or handle the error
               }
               zip.file(filename, data, {binary:true});
               count++;
               if (count == selections.length) {
                 zip.generateAsync({type:'blob'}).then(function(content) {
                      saveAs(content, zipFilename);
                   });
               }
            });
        }
    })

HTML код:

<div class="fetched-images">
    <%= image_tag obj["url"], class: "img-fluid", title: obj["title"] , data:{ type: obj["ity"] }, crossOrigin: "Anonymous" %>
    <label class="checkbox-container">
        <input type="checkbox" data-type="<%= file_type %>" data-href="<%= file_url %>" checked="checked" class="this-image">
        <span class="checkmark"></span>
    </label>
</div>

Answer 1

Это довольно просто.

JSZipUtils.getBinaryContent вызывает обратный вызов, внутри которого вы добавляете файлы к zip. А поскольку обратные вызовы не выполняются в одном и том же контексте, он не имеет доступа к обновленной переменной filename и всегда принимает последнее назначенное значение (в вашем случае имя_файла0) и использует эту переменную для каждой итерации, следовательно, перезаписывает один и тот же файл вместодобавление нового. Вызовите что-то уникальное внутри обратного вызова для имени файла.